@CHARSET "UTF-8";

body { background: url(../images/bg_body.jpg) repeat-x left top #ffffff; line-height: 150%;}

/* containers */
#container { width: 800px; padding: 10px; margin: 0 auto; background: #ffffff;}

/* header */
#header { height: 80px; margin-bottom: 0px; background: url(../images/site_header.jpg) no-repeat left top; width: 800px; height: 80px; position: relative;}
#header h1 { position: absolute; left: 17px; top: 10px;}
#header h1 a { display: block; text-indent: -9999px; background: url(../images/logo.gif) no-repeat left top; width: 300px; height: 55px; }
#header h2 { text-align: right; font-size: 108%; font-weight: bold; color: #666; padding-top: 50px; padding-right: 5px;}

/* footer */
#footer { background: url(../images/bg_footer_top.jpg) no-repeat left top; padding-top: 8px; margin-top: 38px; text-align: center; color: #444; font-size: 92%;}
#footer .inner { background: url(../images/bg_footer.jpg) no-repeat left bottom; padding-top: 9px; padding-bottom: 10px;}
#footer .inner table { margin: 0 auto;}
#footer .inner table a { color: #444; text-decoration: none; padding-right: 10px;}
#footer .inner table a:hover { text-decoration: underline; color: #bf6400;}
#copyright { text-align: center; font-size: 88%; color: #444; margin-bottom: 15px;}

/* common */
#page-title { margin: 10px 0px 20px 10px;}
.list-icon { background: url(../images/icon_arrow1.gif) no-repeat left center; padding-left: 12px;}
.block { border: 4px solid #f5f5f5; border-width: 0px 4px 4px 4px;}
.block .inner { border: 1px solid #ccdbdb; border-width: 0px 1px 1px 1px; padding: 10px;}
.note { font-size: 88%; color: #999;}
.error-message { color: #f00;}
.required { font-size: 86%; color: #f00;}
#flashMessage { border: 1px solid #ffdfdf; background: #fff7f7; padding: 10px; text-align: center; margin-bottom: 20px;}
#globalError h2 { color: #f00; border: 1px solid #f00; background: #fff0f0; padding: 10px; text-align: center; font-size: 1.2em; margin-bottom: 20px;}
#globalError p { margin-bottom: 1em;}
#globalError p.message { background: url(../images/ico_dot.gif) no-repeat 0px 14px; padding: 10px 15px; color: #f00; font-weight: bold;}
#topic-path { margin-bottom: 20px; font-size: 88%; padding: 2px 15px; background: #f6f6f6;}
#topic-path a { color: #333;}
#topic-path a:hover { color: #933;}

/* top page */
#customerData { background: #fff9e3; padding: 10px; margin-bottom: 20px; border: 1px solid #ffeea8;}
#page-top #map-block { width: 494px;}
#page-top #map-block p { margin-bottom: 15px; color: #3f606a;}
#page-top #map { margin-bottom: 10px;}
#page-top #area-list { margin-left: 5px;}
#page-top #area-list li { width: 144px; float: left;}
#page-top #area-list li#list2 { margin: 0px 15px;}
#page-top #map { position: relative;}
#page-top #map-area-list li { position: absolute;}
#page-top #map-area-list li#arealist1 { left: 98px; top: 91px;}
#page-top #map-area-list li#arealist2 { left: 316px; top: 278px;}
#page-top #map-area-list li#arealist3 { left: 46px; top: 301px;}

#page-top #keyword-block { width: 284px; margin-bottom: 16px;}
#page-top #keyword-block dt { background: url(../images/line_dot.gif) repeat-x left bottom; width: 97px; float: left; height: 36px; line-height: 36px; padding: 3px 0px 3px 5px;}
#page-top #keyword-block dd { background: url(../images/line_dot.gif) repeat-x left bottom; width: 154px; float: right; height: 36px; padding: 3px; }
#page-top #keyword-block dd select { margin-top: 7px;}
#page-top #keyword-block #button { text-align: right; padding-top: 15px;}
#page-top #keyword-block select { font-size: 94%;}

#page-top #banner-block { width: 284px; min-height: 240px; _height: 240px; border-top: 4px solid #f5f5f5; background: #f5f5f5; text-align: center;}
#page-top #banner-block #list-links { margin-top: 20px;}
#page-top #banner-block #list-links li { text-align: left; margin-bottom: 10px;}

/* search & list */
#search-cond { margin-bottom: 20px;}
#search-cond dl { float: left; width: 180px; border: 1px solid #ccdbdb; padding: 1px; margin-right: 10px;}
#search-cond dl dt { width: 53px; float: left;}
#search-cond dl dd { width: 120px; float: right; line-height: 26px; text-align: center;}
#search-cond dl#cond-departure { width: 180px; margin-right: 0px;}
#search-cond dl#cond-departure dt { width: 72px; float: left;}
#search-cond dl#cond-departure dd { width: 108px; float: right; line-height: 26px; text-align: center;}
#search-more { margin-bottom: 30px;}
#search-more .fields1 { width: 310px;}
#search-more .fields1 .left { width: 67px;}
#search-more .fields1 .right { width: 225px;}
#search-more .fields1 select { margin-bottom: 7px;}
#search-more .fields2 { width: 450px;}
#search-more .fields2 .left { width: 79px;}
#search-more .fields2 .right { width: 354px;}
#search-more .fields2 li { margin-bottom: 8px;}
#search-more #search-button { background: url(../images/line_dot.gif) repeat-x left top; margin-top: 10px; padding-top: 15px; text-align: center;}
.empty { text-align: center; margin: 30px;}
#datepicker { display: none;}
#ui-datepicker-div { background: #f2f9ff; border: 3px double #acacac; padding: 5px; width: 210px; height: 250px; display: none;}
.ui-datepicker-calendar { border-collapse: collapse; margin: 10px 0px; width: 210px;}
.ui-datepicker-calendar td { font-size: 10px; text-align: right; background: #fff;}
.ui-datepicker-calendar th { background: #fff;}
.ui-datepicker-calendar td a { text-decoration: none; display: block; border: 1px solid #ccc; padding: 3px; }
.ui-datepicker-calendar td a:hover { background: #eef; border: 1px solid #f22;}
.ui-datepicker-calendar th span { display: block; font-size: 10px; border-right: 1px solid #ccc; border-bottom: 3px solid #f2f9ff; padding: 3px; text-align: center;}
td.ui-datepicker-today { font-weight: bold; background: #ffffd5;}
td.ui-datepicker-week-end,
th.ui-datepicker-week-end { background: #fee;}
td.ui-state-disabled { background: #eee;}
.ui-datepicker-header { zoom:100%;}
.ui-datepicker-header:after {  content: "."; clear: both; height: 0; display: block; visibility: hidden;}
.ui-datepicker-header a { display: block; padding: 2px; cursor: pointer;}
.ui-datepicker-header a:hover { color: #f22;}
.ui-datepicker-prev { width: 40px; float: left; font-size: 10px;}
.ui-datepicker-next { width: 40px; float: right; font-size: 10px; text-align: right;}
.ui-datepicker-title { width: 110px; float: left; font-size: 10px; padding: 2px; txet-align: center;}
.ui-datepicker-buttonpane { text-align: center;}
td.ui-datepicker-current-day { background: #f22; color: #fff;} /* 選択されている日 */
.ui-datepicker-trigger { cursor: pointer;}

.ticket { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;}
.ticket-data strong { font-size: 120%; padding: 0px 3px;}
.ticket-data .airline { font-size: 120%; margin-bottom: 5px;}
.ticket-data .airline img { vertical-align: middle;}
.ticket-data .price { color: #f22;}
.ticket-data .comment { background: #f2f2f2; width: 630px; padding: 5px; min-height: 40px;}
.ticket-data .buttons { width: 123px;}
.ticket-data .buttons li { margin-bottom: 5px;}
.ticket-data .arrive-date { margin: 5px 0px;}

/* Page Navigation */
.page-nav-block { margin-bottom: 10px;}
.page-nav-header { color: #12333c; font-weight: bold; font-size: 108%; background: url(../images/line_dot.gif) repeat-x left bottom; padding-bottom: 3px; margin-bottom: 10px;}
.page-nav-header strong { font-size: 120%; color: #f00;}
.page-nav-count { text-align: right;}
.page-nav-numbers span { display: block; margin: 0 3px; float: left; }
.page-nav-numbers span a { display: block; padding: 4px 6px; border: 1px solid #999; text-decoration: none; color: #333;}
.page-nav-numbers .current { font-weight: bold; display: block; border: 1px solid #999; background: #ffffec; float: left; padding: 4px 6px;}
.page-nav-numbers .disabled { color: #888; border: 1px solid #eee; padding: 4px 6px; float: left;}
.page-nav-numbers .active   { color: #333; border: 1px solid #999; padding: 4px 6px; float: left; margin: 0 3px;}
.page-nav-numbers a:hover { background: #ffefec; border-color: #ffddd7;}
.page-nav-block .note { text-align: right;}

/* reservation & Inquiry */
#page-reserve-input .ticket-data .comment,
#page-reserve-confirm .ticket-data .comment,
#page-inquiry-input .ticket-data .comment,
#page-inquiry-confirm .ticket-data .comment { width: 760px; margin: 5px 0px 20px 0px;}
#page-reserve-input .block { margin-bottom: 20px;}
#page-reserve-input .error-message { background: #fff3f3; padding: 5px;}
#input-customer h4 { margin: 15px 0px;}
#input-customer dl.separate { background: url(../images/line_dot.gif) repeat-x left bottom; padding-bottom: 5px;}
#input-customer dl.last { margin-bottom: 30px;}
#input-customer dl dt { width: 220px; float: left; padding: 4px; height: 2.4em;}
#input-customer dl dd { width: 522px; float: left; padding: 4px; height: 2.4em;}
#input-customer .passenger { padding-top: 10px;}
#input-customer .passenger .left { width: 120px; min-height: 80px;}
#input-customer .passenger .right { width: 630px; background: url(../images/line_dot.gif) repeat-x left bottom; padding-bottom: 10px;}
#input-customer .passenger .right p {margin-bottom: 8px;}
#input-customer .passenger input { ime-mode: inactive;}

#message-block { margin-bottom: 20px;}
#message-block textarea { width: 770px; height: 80px;}
#stipulation-block { width: 750px; height: 350px; padding: 10px; border: 1px solid #ddd; overflow: auto; margin-bottom: 10px;}
#btn-agree { text-align: center;}
.btn-next { margin: 20px; text-align: center;}
.buttons { width: 270px; margin: 18px auto;}
#reserve-confirm-text { width: 720px; background: #f3f3f3; padding: 5px 15px; margin: 0 auto;}
#page-reserve-complete .block { border: 4px solid #f5f5f5;}
#page-reserve-complete .block .inner { border: 1px solid #ccdbdb; }
#page-reserve-complete p { text-align: center; margin-bottom: 16px;}
#page-reserve-complete h2 { font-size: 120%; text-align: center; margin-bottom: 30px;}
#page-reserve-complete strong { color: #f00;}
#page-inquiry-confirm #message { margin-bottom: 30px;}

#ssl-info .left { width: 120px;}
#ssl-info .right { width: 650px; color: #666; font-size: 82%; line-height: 50px;}

#date-select { margin: 20px 0px;}
#date-select .calendar { width: 390px; border-collapse: collapse; margin-bottom: 20px;}
#date-select caption { width: 390px; text-align: center; font-weight: bold;}
#date-select .calendar td { border: 1px solid #ccc; padding: 2px; text-align: center; vertical-align: top;}
#date-select .calendar th { border: 1px solid #ccc; background: #efefef; padding: 2px; text-align: center;}
#date-select .tbl-padding { margin-right: 20px;}
#date-select .out-of-service { background: #8c8c8c;}
#date-select td.sunday { background: #ffeeee;}
#date-select th.sunday { background: #ffeeee; color: #f00;}
#date-select .price { color: #2246a7;}