@charset "UTF-8";

.searchArea li{
    margin: 10px 0;
}

.calendarList tr
,.calendarList td 
,.exampleList tr
,.exampleList td {
    border: 1px solid gray;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
}

.exampleList .batsu{
    background-color:#dbdbdb;
}

.exampleList .maru{
    background-color:white;
}

.calendarList th{
    border: 1px solid gray;
    padding: 5px;
    text-align: left;
    vertical-align: middle;
    background-color: rgb(128, 213, 238);
}

.calendarList thead{
    font-weight:bold;
    background-color:#f4f4f4;
    font-family: 'Hiragino Maru Gothic ProN';
}

.calendarList .header{
    font-weight:bold;
    background-color:#f4f4f4;
    font-family: 'Hiragino Maru Gothic ProN';
}

.calendarList th li{
    padding: 1px;
}

.calendarList th h2{
    font-size: 1.3em;
    color: black;
}

.calendarList th h3{
    font-size: 1.1em;
    color: black;
}

.calendarList .hour_price{
    font-size: 0.9em;
}

.searchArea ul li{
    display: inline-block;
}

.searchArea dl dt{
    display: inline-block;
}

.searchArea dl dd{
    display: inline-block;
    padding: 3px;
}

.searchArea #date{
    height: 30px;
    margin: 0;
    padding: 0 0 0 5px;
    vertical-align: middle;
    background: #f3f3f3;
    border: solid 1px #dfdfdf;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.searchArea .searchButton{
    height: 30px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    margin: 5px;
    vertical-align: middle;
    text-align: center;
    background: #71A1C9;
    border: solid 1px #71A1C9;
    color: white;
}

.exampleArea{
    margin:20px 0 10px 0;
}

.exampleArea ul li{
    display: inline-block;
    vertical-align: middle;
}


.calendarList .example{
    width : 15px;
    height : 15px;
    padding: 0;
}

.example .maruText{
    color : #71A1C9;
}

.calendarArea{
    width:100%;
    overflow: auto;
}

@media only screen and (max-width: 800px) { 
    .calendarList th h2{
        font-size: 1.2em;
    }
    
    .calendarList th h3{
        font-size: 1.1em;
    }
    .calendarList{
        font-size:0.9em;
    }
    
    .calendarList tr
    ,.calendarList td
    ,.calendarList th {
        padding: 2px;
    }
}