@charset "UTF-8";
:root{
    /*----------color*/
    --main:#0075C4;
    --dark:#0B4382;
    --light:#E9F6FF;
    --text:#0D0D0D;
    --textNuki:#ffffff;
    --textDisabled:#B2E0FF;
    --point:#DE1E39;
    --pointLight:#FFE6EA;
    --mainBg:#ffffff;
    --gray:#ebebeb;
    --darkgray:#a8a8a8;
    /*----------text*/
    --lineheight:1.8em;
    /*----------breakpoint*/
    --primaryWidth:1024px;
    --subWidth:550px;
    --form:60%;
    @media(min-width:1400px) {
        /*wide*/
        --primaryWidth:1024px;
    }
    @media(max-width:1024px) {
        /*sp-and-tablet*/
        --primaryWidth:calc(100vw - 16px);
        --subWidth:calc(100vw - 16px);
        --form:100%;
    }
    @media(max-width:767px) {
        /*sp-only*/
    }
}

/*-----all--------------*/
* {
    margin: 0px;
    padding: 0px;
    -webkit-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
    box-sizing: border-box !important; 
    font-family:'BIZ UDPGothic', sans-serif,"UD Shin Go Regular","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" !important;
}
body,html {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body{
    position: relative;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    margin: 0;
    padding-bottom:280px; /* for footer*/
	font-weight: normal;
    font-size: 1rem;
}
a, a:link, a:visited, a:hover, a:focus a:active{
    display: block;
    cursor: pointer;
    text-decoration: none;
}
input,select,textarea{
    /*clear start*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-sizing: content-box;
    outline: none;
    font-size: inherit;
    color: inherit;
    /*clear end*/
    &:not([type="text"],[type="password"]){
        cursor: pointer;
    }
}
/*-----------------------p--------------*/
#pageTitle p,
footer p{
    line-height: var(--lineheight);
}
#contentWrap p{
    line-height: var(--lineheight);
    & a{
        display: inline-block !important;
        font-weight: bold;
        text-decoration: underline !important;
        color: var(--main) !important;
        &[target="_blank"]{
            padding-right:0.1rem;
            overflow-wrap:anywhere;
            &::after{
                display: inline-block;
                content:"";
                width:1rem;
                height: 1rem;
                margin-left:0.1rem;
                background: url(../img/icon_window.svg) center / contain no-repeat;
            }
        }
    }
    & span.midashi{
        display: inline-block;
        margin-top:1rem;
        font-weight: bold;
    }
    & span.s{
        font-size: 0.8rem;
    }
    & span.fusoku{
        display: inline-block;
        margin-top:1rem;
    }
}

/*---------------header and footer-----------------*/
header{
 width: 100%;
 & a{
    display: block;
    width: 260px;
    margin: 20px auto;
 }
}
img.headerLogo{   
    width: 260px;
    &:hover{
        opacity: 0.6;
        transition: 0.2s;
    }
}   
footer{
    position: absolute;
    top:auto;
    bottom:0;
    width: 100%;
    height: fit-content;
    flex-grow: 1;
    & a:has(img){
        width: fit-content;
        margin: 0 auto 30px auto;
    }
}
#backtopImg{
    display: block;
    &:hover{
        opacity: 0.6;
        transition: 0.2s;
    }
}
#copyright{
    margin: 0 !important;
    padding:10px 8px;
    text-align: center;
    background: var(--dark);
    & p{
        margin: 0 !important;
        text-align: center;
        font-size: 0.7rem;
        color: var(--textNuki);    
    }
    & a{
        display: inline-block !important;
        text-decoration: underline;
        color: var(--textNuki) !important;
    }
}

/*-----main-wrap and title--------------*/
#pageTitle{
    box-sizing: border-box;
    padding:15px 8px;
    background: var(--main);
    text-align: center;
    & p{
        box-sizing: border-box;
        width: var(--primaryWidth);
        margin: 0 auto !important;
        font-weight: bold;
        font-size: 1.1rem;
        color: var(--textNuki);
    }
}
    @media(max-width:1024px) {
        #pageTitle{
            text-align: left;
        }
    }
#contentWrap{
    position: relative;
    background: var(--light);
    max-width: 100vw;
    margin: 0;
    padding: 0;
    &::after{
        position: absolute;
        display: block;
        content:"";
        width: 77px;
        height: 35px;
        left:50%;
        bottom: -34px;
        transform: translateX(-50%);
        background: url(../img/next.svg) center / contain no-repeat;
    }
}
#contentWrap.noarrow{
    &::after{
    display: none;
    }
    & + #buttonWrap{
        margin:30px auto 0 auto;
    }
}
article{
    position: relative;
    width: var(--primaryWidth);
    max-width: 100vw;
    margin: 30px auto;
    &:has( .inputContent, .reserve_list, .checkAll, .reserve_detail)
    {
        width: var(--subWidth);
    }
}
section{
    max-width: 100vw;
}
section:has( + section){
    margin-bottom: 30px;
}
#topText{
    width:var(--subWidth);
    margin:30px auto 0 auto;
    text-align: center;
    font-weight: bold;
    color: var(--main);
}
.contentTitle{
    position: relative;
    margin-bottom: 20px;
    font-weight: bold;
    color: var(--dark);
    & span.required{
        display: inline-block;
        width: 4rem;
        position: absolute;
        top:50%;
        right:0;
        transform: translateY(-50%);
        padding:5px 0;
        border-radius: 3px;
        background: var(--point);
        color: var(--textNuki);
        text-align: center;
        font-size: 0.8rem;
    }
    &:has(span.required){
        padding-right:calc(4rem + 8px);
    }
    &:has(button.edit){
        padding-right:calc(6rem + 8px);
    }
    
    &:has( + p.topCaution ){
        margin-bottom: 5px;
    }
}
p.topCaution{
    margin-bottom: 5px;
    font-weight: bold;
    font-size:0.9rem;
    color: var(--point);  
}
.contentInner{
    padding:20px 10px;
    border-radius: 5px;
    background: var(--mainBg);
    &.inputContent{
        padding:0;
        background: transparent;
    }
    &.applicant,
    &.checkAll{
        background: var(--mainBg);
        padding: 20px 10px;
    }
    & button{
        margin:20px auto 0 auto;
    }
}
.innerTitle{
    margin-bottom:10px;
    font-weight: bold;
    color: var(--main);
    &:not(:first-child){
        margin-top:20px;
    }
}


/*-----------------------button--------------*/
#buttonWrap{
    margin:65px auto 0 auto;/* 30px  +  "next"35px*/
    width: fit-content;
}
button{
    /*clear start*/
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    /*clear end*/
    display: block;
    width: 300px;
    padding:15px 10px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: bold;
    border:3px solid;
    cursor: pointer;
}
button.common,
button.next{
    color: var(--textNuki);
    background: var(--main);
    border-color:var(--main);
}
button.sub,
button.back{
    color: var(--main);
    background: var(--mainBg);
    border-color:var(--main);
}
button#complete-close{
    margin:20px auto;
}
button.confirm{
    color: var(--textNuki);
    background: var(--point);
    border-color:var(--point);
}
button.ticket{
    color: var(--textNuki);
    background: var(--dark);
    border-color:var(--dark);
}
button.edit{
    display: inline-block;
    width: 6rem;
    padding:10px 0;
    position: absolute;
    top:50%;
    right: 0;
    transform: translateY(-50%);
    border-radius: 20px;
    font-size: 0.9rem;
    border:none;
    background: var(--main);
    color: var(--textNuki);
}
button:disabled{
    pointer-events: none;
    color: var(--textDisabled);
    background: var(--light);
    border-color:var(--light);
}
button.paymentPeriod:disabled{
    border-color:var(--main) !important;
    color: var(--main);
    & p:nth-child(2){
            font-size: 0.9rem;   
        }
}
button + button{
 margin-top: 20px;   
}
button:not(:disabled):hover{
    opacity: 0.6;
    transition: 0.2s;
}

/*----------------------erroe-----------------------------*/
#errorMsg{
    margin: 0 auto 30px auto;
    & p{
        text-align: center;
        color: var(--point);
    }
}


/*-----------------------input,checkbox,label--------------*/
#agreementWrap{
    width: fit-content;
    margin:0 auto;
}
.labelWrap{
    position: relative;
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-template-rows: 1fr;
    column-gap: 15px;
    vertical-align: middle;
    cursor: pointer;
    &:not(first-child){
        margin-top:20px;
    }
}
#loginError{
    margin:20px auto 0 auto;
    width: fit-content;
    font-weight: bold;
    font-size:0.8rem;
    color: var(--point);
}
.inputContent{
    & input[type="text"] {
        width: 100%;
        margin: 0 !important;
        background: var(--mainBg);
    }
}
label{
    display: block;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    & div{
        margin-top:10px;
        font-size: 0.8rem;
        font-weight: normal;
        color: var(--text);
    }
}

/*-----input_checkbox*/
input[type="checkbox"] {
    width:30px;
    height: 30px;
    border: 2px solid var(--point);
    border-radius: 4px;
    background: var(--mainBg);
}
input[type="checkbox"]:checked::before {
    display: block;
    content: "";
    position: absolute;
    top:0;
    left:0;
    width:30px;
    height: 30px;
    content:  url(../img/icon_check.svg);
    border-radius: 4px;
    background: var(--main);
    accent-color: var(--main);
}
input[type="checkbox"] + label{
    color: var(--point);
}
input[type="checkbox"]:checked + label{
    color: var(--main) !important;
}
/*-----input_txt*/
input[type="text"],
input[type="password"] ,
input[type="tel"],
input[type="email"] {
    display: block;
    width: var(--form);
    margin:20px auto 0 auto;
    padding:15px 10px;
    border: 2px solid var(--main);
    border-radius: 5px;
    font-size:1.1rem;
}

/*-----input_radio*/
.radioWrap{
    position: relative;
    & + .radioWrap{
        margin-top:20px;
    }
}
input[type="radio"]{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top:50%;
    left:15px;
    transform: translateY(-50%);
    background: var(--mainBg);
    border: 2px solid var(--main);
    border-radius: 50%;
}
input[type="radio"]:checked::before{
    display: block;
    position: absolute;
    content:"";
    width: 30px;
    height: 30px;
    top:50%;
    left:3px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--main);
}
input[type="radio"] + label{
    padding: 20px 15px 20px 65px;
    border-radius: 100px;
    border: 2px solid var(--mainBg);
    color: var(--main);
    background: var(--mainBg);
}
input[type="radio"]:checked + label{
    border: 2px solid var(--main);
}
.radioGrid{
 
}


/*-----select*/
div.inputContent:has( select ){
    position: relative;
    & select{
        width: 100%;
        height: 3rem;
        padding:0 8px;
        line-height: 3rem;
        border: 2px solid var(--main);
        border-radius: 5px;
        background: var(--mainBg);
    }
    &::after{
        display: block;
        content:"";
        position: absolute;
        width:2rem;
        height: 3rem;
        top:50%;
        right:0;
        transform: translateY(-50%);
        border-radius: 0 5px 5px 0;
        background: var(--main) url(../img/icon_arrow.svg) center / contain no-repeat;
        pointer-events: none;
    }
}
section:has(.inputGrid){
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr 6rem;
    grid-template-rows: 1fr;
    align-items: center;
    & .contentTitle{
        margin-bottom: 0;
    }
}
#totalWrap{
    width: fit-content;
    margin: 30px auto 0 auto;
    text-align: center;
    color: var(--main);
    & span.totalNum{
        font-weight: bold;
        font-size: 1.3rem;
    }
    & span.caution{
        color: var(--point);
        font-size: 0.9rem;
    }
}
div.inputContent:has( select.station ){
    &::before{
        display: block;
        content:"";
        position: absolute;
        width:2rem;
        height: 3rem;
        right:0;
        bottom:0;
        border-radius: 0 5px 5px 0;
        background: var(--main) url(../img/icon_arrow.svg) center / contain no-repeat;
        pointer-events: none;
    }
    &::after{
        top:0 !important;
        right:0;
        transform: none;
        border-radius: 0 5px 5px 0;
    }
}
#to-arrow{
    width:35px;
    height: 32px;
    margin:0 auto;
    background: url(../img/icon_to.svg) center / contain no-repeat;
}



/*----input_file----*/
#fileUpload{
    padding:20px;
    margin:20px auto !important;
    border-radius: 5px;
    background: var(--mainBg);
    & form:hover{
        opacity: 0.5;
        transition: .2s;
    }
    & input.certificate{
        display: block;
        width: 100%;
        text-align: center !important;
        color: #0075C4;
    }
    & .certificate::file-selector-button{
        /*clear start*/
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
        /*clear end*/
        display: block;
        width: 200px;
        margin:0 auto 20px auto;
        padding:8px 2px;
        border-radius: 5px;
        border:2px solid var(--main);
        cursor: pointer;
        color: var(--main);
    }
}

/*----input_date-and-time----*/
input[type="date"],
input[type="time"]{
    position: relative; /* 子要素（アイコン）の基準にする */
    width: 100%;
    height: 3rem;
    padding: 0 8px;
    border: 2px solid var(--main);
    border-radius: 5px;
    background: var(--mainBg);
    cursor: pointer; /* 全体がクリックできることを示す */
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0; /* アイコンを透明にして全体を覆う */
    z-index:99;
}
input[type="date"]::after,
input[type="time"]::after{
    content: "";
    position: absolute;
    display: block;
    width: 2rem;
    height: 2rem;
    top:50%;
    right:8px;
    transform: translateY(-50%);
    pointer-events: none;
}
input[type="date"]::after{
    background: url(../img/icon_calendar.svg) center / contain no-repeat;
}
input[type="time"]::after{
    background: url(../img/icon_time.svg) center / contain no-repeat;
}


/*-------details summary---------------------------------------*/
section:has( details.routeWrap){
    & details{
        width: var(--subWidth) !important;
        margin:0 auto;
    }
    &:only-child summary{
        display: none;
    }
    & + button.common{
        margin:30px auto 0 auto;
    }
}
summary {
    display: block;
    list-style: none;
    cursor: pointer;
}  
    /* Chrome-Safari */
    summary::-webkit-details-marker {
        display:none;
    }
details.routeWrap{
    & summary{
        position: relative;
        padding:20px 0;
        border-top: 2px solid var(--light);
        border-right: 2px solid var(--light);
        border-bottom: 2px solid var(--main);
        border-left: 2px solid var(--light);
        border-radius: 5px;
        font-weight: bold;
        color: var(--main);
        cursor: pointer;
        &:hover{
            opacity: .5;
            transition: .2s;
        }
        &::after{            
            display: block;
            position: absolute;
            top:50%;
            right:8px;
            transform: translateY(-50%);
        }
    }
    &[open] summary{
        border-radius: 0;
        &::after{
            content: "\025b2";
        }
    }
    &:not([open]) summary{
        padding:20px 8px;
        border: 2px solid var(--main);
        &::after{
            content: "\025bc";
        }
    }
    & .routeTop{
        margin:15px 0;
        font-weight: bold;
        color: var(--dark);
    }
    & .bordingName,
    & .alightName{
        position: relative;
        padding:15px 0;
        border-radius: 5px;
        background: var(--dark);
        color: var(--textNuki);
        font-size:1.1rem;
        font-weight: bold;
        z-index:10;
        & p{
            padding-left:calc(1rem + 40px);
        }
        &::before{
            content: "";
            display: block;
            width:calc(1rem + 20px);
            height: calc(1rem + 20px);
            position: absolute;
            top:50%;
            left:10px;
            transform: translateY(-50%);
            background: var(--main);
            border-radius: 50%;
        }
    }
    & .alightName{
        margin-top:-15px;
    }
    & .routeInfoWrap{
        position: relative;
        width:calc(100% - ((1rem + 40px)/2) + 2.5px);
        margin:-15px 0 0 auto;
        padding:30px 0 30px calc((1rem + 40px)/2) ;
        border-left:5px solid var(--main);
        z-index:20;
        font-size:0.9rem;
        color: var(--dark);
        & .bordingTime{
            margin-bottom:15px;
            font-weight: bold;
        }
        & .detail{
            padding:8px;
            border-radius: 5px;
            background: var(--mainBg);
            & .amount,
            & .timeRequired{
                display: grid;
                grid-template-columns: 5rem 1fr;
                grid-template-rows: 1fr;
                & .title{
                    border-radius: 3px;
                    text-align: center;
                    color: var(--textNuki);
                    background: var(--main);
                }
                & .title + p{
                    padding-left:8px;
                }
            }
            & .timeRequired{
                margin-top:8px;
            }
        }
        & .alightTime{
            margin-top:15px;
            font-weight: bold;
        }
    }
    & button{
        margin:30px auto 0 auto;
        color: var(--main);
        background: var(--mainBg);
        border-color:var(--main);       
    }
}
#buttonWrap:has( #total, #num ){
    line-height: 1.8rem;
    #num{
        margin-bottom:10px;
    }
    #total{
        margin-bottom:20px;
    }
    #num p:first-child,
    #total p:first-child{
        color:var(--main);
        font-weight: bold;
    }
    #num p:not(:first-child),
    #total p:not(:first-child){
        padding-left:1em;
        color:var(--dark);
    }
}

/*---------------------applicant---------------*/
.contentInner.applicant{
    & input[type="text"],
    & input[type="password"] ,
    & input[type="tel"],
    & input[type="email"] {
        width: 100%;
        margin:0 auto;
    }
    & input[type="checkbox"] {
        border: 2px solid var(--main);
    }
    & input[type="checkbox"] + label{
        color: var(--main);
    }
    & p.subinfo{
        font-weight: bold;
        color: var(--point);
        font-size: 0.9rem;
    }
}
textarea{
    width:100%;
    height: 10rem;
    padding:15px 10px;
    border: 2px solid var(--main);
    border-radius: 5px;
    font-size: 1.1rem;
}
/*---------------------checkAll, reserve---------------*/
.contentInner.checkAll,
.contentInner.reserve_list,
.contentInner.reserve_detail{
    color: var(--dark);
    & p.sum{
        text-align: right;
        font-weight: bold;
    }
    & div.title{
        font-weight: bold;
        & + div{
            padding-left:2rem;
        }
    }
    & p.subinfo{
        font-weight: bold;
        color: var(--point);
        font-size: 0.9rem;
    }
}

/*---------------mypage-----------------*/
.mypageCont{
    width: fit-content;
    margin: 30px auto 0 auto;
    font-size: 0.95rem;
    text-align: center;
    color: var(--dark);
    & button{
        margin: 0 auto 10px auto;
    }
    & #announcement{
        font-size: 1rem;
        font-weight: bold;
        color: var(--point);
    }
}
/*---------------reserve-----------------*/
/*--------list----------*/
.contentInner.reserve_list,
.contentInner.reserve_detail{
    & .status{
        width: fit-content;
        margin-bottom:10px;
        padding:3px 5px;
        border-radius: 3px;
        font-weight: bold;
        font-size: 0.9rem;
        &.wait{/*承認待ち*/
            background: var(--main);
            color: var(--textNuki);
        }
        &.announcement{/*ご確認ください*/
            background: var(--point);
            color: var(--textNuki);
        }
        &.ok{/*承認済み*/
            background: var(--light);
            color: var(--main);
        }
        &.cancel,
        &.expired{/*キャンセル済み - 期限切れ*/
            background: var(--gray);
            color: var(--darkgray);
        }
    }
    & .noticeCont{
        margin-bottom:10px;
        padding:10px 5px;
        color: var(--point);
        background: var(--pointLight);
        display: none;
    }
    & .announcement + .noticeCont,
    & .ok + .noticeCont{
        display: block !important;
    }
    & .dateTime{
        color: var(--main);
        font-weight: bold;
    }
}
.contentInner.reserve_list{
    border: 2px solid var(--main);
    & .detail{
        margin: 20px 0;
        color: var(--dark);
    }
    & .listTitle{
        padding: 5px;
        font-weight: bold;
        background: var(--light);
        & + div{
            padding:5px;
            & + .title{
                margin-top: 10px;
            }
        }
    }
    & button.sub p{
        line-height: 1.3em !important;
        &:nth-child(2){
            font-size: 0.9rem;   
        }
    }
    &:has( div.status.cancel),
    &:has( div.status.expired){
        border: none !important;
        & button.sub p:nth-child(2){
            display: none !important;
        }
    }
    &:has( div.status.announcement){
        border-color:var(--point);
        & button.sub{
            border-color: var(--point);
            color: var(--point);
        }
    }
}
/*--------detail----------*/
#reserve_detail_buttonWrap{
    width: fit-content;
    margin:0 auto;
    & button:disabled{
        border: 3px dotted var(--mainBg);
    }
}
section:has( div.cancel, div.expired ) ~ section div.contentTitle button{
    display: none;   
}

/*----dialog--------------------------------------------*/
.dialog::backdrop {
    backdrop-filter: blur(4px);
}
.dialog {
    min-width:50%;
    max-width:88%;
    padding:10px 10px 20px 10px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    border:2px solid var(--dark);
    border-radius: 5px;
    & button.close{
        position: relative;
        width:40px;
        height: 40px;
        padding:0;
        margin: 0 0 0 auto;
        border-color: var(--dark);
        background-color: var(--dark);
        & p{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            color: var(--textNuki) !important;
        }
    }
    & p.main-msg{
        line-height: 1.5em;
        padding:20px 0;
        text-align: center;
        font-size:1.1em;
        font-weight: bold;
    }
    & p.sub-msg{
        line-height: 1.5em;
        text-align: center;
    }
    & form{
        width: fit-content;
        margin: 40px auto 0 auto;
    }

}