@charset UTF-8;

/* ******************************************

    [ index ]

    01. flash
    02. top page contents
    
****************************************** */

/* ******************************************
    01. calender contents box
****************************************** */
#calender-contents-box {
width: 900px;
color: #231d1d;
margin: 0 16px;
}

#calender-contents-box h2 {
width: 900px;
height: 160px;
background: transparent url("../calender/img/title_calender.jpg") top left no-repeat;
}



/* ******************************************
    02. calender mark
****************************************** */
#cal-mark-box {
margin: 15px 20px 0;
}

#cal-mark-box li {
float: left;
margin-right: 16px;
}

#cal-mark-box em {
font-style: normal;
}

/* 利用状況マーク */
#cal-mark-box em.cal-mark01 {
color: #dc771c;
}

#cal-mark-box em.cal-mark02 {
color: #c0dc1c;
}

#cal-mark-box em.cal-mark03 {
color: #83e7e0;
}



/* ******************************************
    03. calender全般
****************************************** */
#calender-box {
width: 860px;
margin: 0 20px 16px;
}

/* カレンダー左右振り分け */
#cal-left {
float: left;
width: 420px;
}

#cal-right {
float: right;
width: 420px;
}

/* カレンダーテーブル全体設定 */
#calender-box table {
width: 420px;
table-layout: fixed;
border-collapse: collapse;
}

#calender-box table,
#calender-box th,
#calender-box td {
height: 38px;
border: 1px solid #b5b5b5;
text-align: center;
}

/* カレンダー年・月 */
#calender-box th.cal-month {
width: 146px;
font-size: 14px;
font-weight: bold;
color: #ffffff;
text-align: left;
vertical-align: bottom;
padding-left: 6px;
background-color: #808080;
}

/* 曜日 */
#calender-box th.day-of-the-week {
vertical-align: bottom;
background-color: #dedede;
}

/* 日付 */
#calender-box td.day {
font-size: 14px;
}

/* ご利用時間 */
#calender-box td.select-time {
text-align: left;
padding-left: 6px;
background-color: #dedede;
}

/* 午前・午後・夜間 */
#calender-box td.time {
text-align: left;
padding: 0 6px;
}

#calender-box td span.time-layout01 {
margin-left: 16px;
}

#calender-box td span.time-layout02 {
margin-left: 8px;
}

/* 利用状況マーク */
#calender-box td.cal-mark01 {
color: #dc771c;
font-size: 14px;
}

#calender-box td.cal-mark02 {
color: #c0dc1c;
font-size:14px;
}

/* 空き */
#calender-box td.cal-no-entry {
background-color: #e4fffd;
}



/* ******************************************
    04. カレンダーコントロール
****************************************** */
/* 上段 */
#cal-control-box-top {
position: relative;
width: 860px;
margin: 15px 20px 0;
}

#cal-control-box-top ul {
width: 860px;
height: 20px;
}

#cal-control-box-top li {
height: 26px;
text-indent: -9999px;
}

#cal-control-box-top li#previous-month-top {
position: absolute;
width: 98px;
height: 20px;
top: 0;
left: 0;
}

#cal-control-box-top li#next-month-top {
position: absolute;
width: 98px;
height: 20px;
top: 0;
left: 762px;
}

li#previous-month-top a {
width: 98px;
height: 20px;
background: transparent url("../calender/img/btn_previous_month_top.gif") top left no-repeat;
display: block;
}

li#next-month-top a {
width: 98px;
height: 20px;
background: transparent url("../calender/img/btn_next_month_top.gif") top left no-repeat;
display: block;
}

#cal-control-box-top li a:hover {
background-position: 0 -20px;
}


/* 下段 */
#cal-control-box {
position: relative;
width: 860px;
margin: 0 20px 20px;
}

#cal-control-box ul {
width: 860px;
height: 26px;
}

#cal-control-box li {
height: 26px;
text-indent: -9999px;
}

#cal-control-box li#previous-month {
position: absolute;
width: 98px;
height: 26px;
top: 0;
left: 0;
}

#cal-control-box li#contact {
position: absolute;
width: 281px;
height: 26px;
top: 0;
left: 290px;
}

#cal-control-box li#next-month {
position: absolute;
width: 98px;
height: 26px;
top: 0;
left: 762px;
}

li#previous-month a {
width: 98px;
height: 26px;
background: transparent url("../calender/img/btn_previous_month.gif") top left no-repeat;
display: block;
}

li#contact a {
width: 281px;
height: 26px;
background: transparent url("../calender/img/btn_contact.gif") top left no-repeat;
display: block;
}

li#next-month a {
width: 98px;
height: 26px;
background: transparent url("../calender/img/btn_next_month.gif") top left no-repeat;
display: block;
}

#cal-control-box li a:hover {
background-position: 0 -26px;
}