@CHARSET "UTF-8";
/**
 * styles.css
 * $Id: styles.css 114 2010-04-14 03:37:37Z clefarray $
 *
 */


/*
 * ---------------------------------------------------------------------------------------------
 * common styles
 * ---------------------------------------------------------------------------------------------
 */
/* for elements */
body,p,ul,ol,li,dl,dt,dd,td,th,h1,h2,h3,h4,h5,h6,form,input { margin: 0px; padding: 0px; line-height: 1.5em; color: #333; font-size: 10pt;}
li { list-style-type: none;}
a { color: #333;}
body { background: #F1EEE7; font-family: Meiryo, 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;}
img { border: 0px;}
em { font-style: normal; font-weight: bold; font-size: 108%;}

/* for selectors */
.clear { clear: both; height: 1px; font-size: 1px; line-height: 0px;}
.error { color: #f00;}
#topic-path { margin-bottom: 10px;}
.text_basic { color:#333; font-size:12px;}
.text_basic a { color:#333;}
.text_basic a:hover { text-decoration:none;}
.text_orange { color:#F28300;}
.header-image { margin-bottom: 10px;}
.title-bar{ width:610px; height:35px; color:#666; background:url(../images/bg_title_bar.jpg) no-repeat; padding: 12px 0 0 10px;}
.note { font-size: 80%; color: #888;}
.box { width: 610px; background:url(../images/bg_box610_top.jpg) no-repeat left top; padding-top: 6px; margin-bottom: 20px;}
.box .box-inner { background:url(../images/bg_box610_btm.jpg) no-repeat left bottom; padding-bottom: 6px;}
.box .box-inner .box-body { background:url(../images/bg_box610_body.jpg) repeat-y left top; padding: 5px 15px; overflow: hidden; zoom: 1;}
.box .box-inner .box-body:after { content: "."; font-size: 1px; height: 1px; clear: both; visibility: hidden;}
.box strong { color: #F58201;}
.loading { color: #c00;}
.loading img { vertical-align: middle; padding-right: 4px;}
.field-short { width: 80px;}
.field-mid { width: 120px;}
.field-large { width: 250px;}
.field-xlarge { width: 450px;}
#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;}
.required { color: #f00;}

/* containers */
#contents-wrapper { width: 800px; margin:0 auto; border-top:5px solid #fff; border-right:10px solid #fff; border-left:10px solid #fff; background:#fff; padding-bottom: 10px;}
#side-column { width:180px; float:left; display:block; overflow:hidden; margin:10px 10px 10px 0; background:#fff;}
#main-column { width:610px; float:right; display:block; overflow:hidden; margin:10px 0 10px 0; background:#fff;}


/* header */
#header { width:800px; height:80px; background: url(../images/bg_header.jpg) no-repeat; position:relative;}
#header h1 { width:220px; float:left; padding-left: 20px; padding-top: 4px;}
#header div { font-size: 14px; font-weight: bold; color: #666; padding: 41px 10px 0 0; width: 300px; float: right; text-align: right;}

/* footer */
#footer { clear:both; width:800px; margin:0; padding:0; display:block; overflow:hidden; text-align:center;}
#footer-inner { background:url(../images/bg_footer.jpg) no-repeat; padding-top:8px; }
#footer-inner * { font-size: 9pt;}
#footer-inner #footer-text table { margin: 0 auto;}
p#copyright { background: url(../images/bg_footer_btm.jpg) no-repeat left top; padding-top: 12px;}

/* side nav */
#area-nav{ background:url(../images/bg_menu.jpg) repeat-y; display:block; overflow:hidden;}
#area-nav ul li#nav01 { list-style:none; text-indent:-7777px; width:170px; height:35px; background:url(../images/menu01.jpg) no-repeat; display:block; overflow:hidden; margin:0 0 10px 5px;}
#area-nav ul li#nav02 a { list-style:none; text-indent:-7777px; width:170px; height:34px; background:url(../images/menu02.jpg) no-repeat; display:block; overflow:hidden; margin:0 0 0 5px; }
#area-nav ul li#nav03 a { list-style:none; text-indent:-7777px; width:170px; height:34px; background:url(../images/menu03.jpg) no-repeat; display:block; overflow:hidden; margin:0 0 0 5px; }
#area-nav ul li#nav04 a { list-style:none; text-indent:-7777px; width:170px; height:35px; background:url(../images/menu04.jpg) no-repeat; display:block; overflow:hidden; margin:0 0 0 5px; }
#area-nav ul li#nav02 a:hover { background-position:bottom;}
#area-nav ul li#nav03 a:hover { background-position:bottom;}
#area-nav ul li#nav04 a:hover { background-position:bottom;}
#area-nav ul.sub-cat { margin-bottom:10px; position:relative; *top:-10px;}
#area-nav ul.sub-cat li { list-style:none; text-indent:10px; margin-left:20px; background:url(../images/ico_dot.gif) no-repeat 0 4px;}
#area-nav ul.sub-cat li a:hover { text-decoration: none;}
#nav-btm { width:180px; height:8px; background:url(../images/bg_menu_btm.jpg) no-repeat; display:block; overflow:hidden; padding-bottom:10px;}
ul#list-links { background:url(../images/btn_link.jpg) no-repeat; padding-top:35px; }
ul#list-links li { list-style:none; text-indent:10px; margin-left:0px; background:url(../images/ico_dot.gif) no-repeat 0 4px; line-height:1.2em;}
ul#list-links li a { color:#333; font-size:12px;}
ul#list-links li a:hover { text-decoration:none;}
#side-column .banner {margin-top:5px;}

/*
 * ---------------------------------------------------------------------------------------------
 * toppage styles
 * ---------------------------------------------------------------------------------------------
 */
#map { width:610px; height:357px; background:url(../images/bg_map.jpg) no-repeat; display:block; overflow:hidden; position:relative;}
#map #map_btn01 { position:absolute; left:75px; top:52px; }
#map #map_btn02 { position:absolute; left:388px; top:107px;}
#map #map_btn03 { position:absolute; left:388px; top:222px;}
#map #map_btn04 { position:absolute; left:75px; top:255px;}
/*#hide_window { width: 178px; height:220px; background:url(../images/hide_window.png) no-repeat; display:none; overflow:hidden; position:relative; top:60px; left:150px; -moz-opacity:0.80; opacity:0.80;}*/
#hide_window { width: 178px; height:250px; background:url(../images/hide_window.gif) no-repeat; display:none; overflow:hidden; position:relative; top:60px; left:150px;}
#hide_window ul { position:absolute; top:10px; left:45px;}
#hide_window ul li { list-style:none; text-indent: 10px; margin-left:0px; background:url(../images/ico_dot.gif) no-repeat 0 4px; }
#hide_window ul li a:hover { text-decoration:none;}
#campaigns { height: 1%; }
#campaigns .campaign { width: 305px; float: left; padding-bottom: 20px;}
#campaigns .campaign .hotel-pic { width: 120px; height: 120px; float: left; margin-right: 10px; text-align: center;}
#campaigns .campaign .text { width: 160px; float: left;}
#campaigns .campaign .text .comment { border: 1px solid #fed7b1; background: #fff0e2; padding: 5px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
#search_map { clear: both; padding-top: 30px;}
#charge-rule { margin: 30px 0px;}
#charge-rule table { border-collapse: collapse; margin-left: 5px;}
#charge-rule td { padding: 5px; border: 1px solid #ccc;}
#customerData { background: #fff9e3; padding: 10px; margin-bottom: 20px; border: 1px solid #ffeea8;}

/*
 * ---------------------------------------------------------------------------------------------
 * hotel list & detail
 * ---------------------------------------------------------------------------------------------
 */
.hotel { width: 300px; float: left; padding-bottom:20px; padding-top: 20px; border-bottom: 1px dotted #ccc;}
.hotel strong { color: #F58201;}
.hotel .hotel-pic { width: 120px; height: 120px; margin-right: 5px; float: left; text-align: center;}
.hotel .hotel-data { width: 175px; float: right; }
.hotel .hotel-data dt,
.hotel .hotel-data dd { padding-right: 10px;}
.list-nav { margin: 10px; text-align: center;}
#detail-area,
#subpic-area,
#convenience-area,
#room-area,
#reservation-area { margin-bottom: 20px;}
#detail-area strong { color: #F58201;}
#detail-area li { width: 420px; border-bottom: 1px dotted #ccc; list-style-type: none;}
#detail-area .hotel-pic { width: 140px; float: left;}
#detail-area .hotel-data { width: 460px; float: right;}
.box .box-inner .box-body dd { padding-left: 8px; margin-bottom: 5px; padding-bottom: 5px; background: url(../images/bg_delimiter.jpg) no-repeat left bottom;}
#subpic-area .subpic { width: 150px; float: left;}
#convenience-area { margin-bottom: 15px;}
#tab-roomtype { height: 24px; padding-left: 10px;}
#tab-roomtype li { width: 102px; float: left; height: 24px; list-style-type: none;}
#tab-roomtype li a { display: block; width: 102px; height: 24px; text-decoration: none;}
#tbl-reservation { width: 590px; border-collapse: collapse; margin-left: 4px;}
#tbl-reservation td,
#tbl-reservation th { border: 1px solid #999;}
#tbl-reservation thead th { background: #F0EEE6;}
#tbl-reservation tbody th { background: #fff; font-weight: normal; text-align: center;}
#tbl-reservation tbody td { background: #fff; padding: 2px; text-align: center; width: 60px;}
#tbl-reservation tbody .day { background: #F0EEE6;}
#tbl-reservation tbody td a { color: #f00;}
#tbl-reservation tbody td a:hover { text-decoration: none;}
#tbl-reservation tbody td.out-of-service { background: #ccc;}
#tbl-reservation-nav { width: 610px;}
#tbl-reservation-nav td { width: 200px; padding: 5px 0px; color: #F58201; font-weight: bold; font-size: 1.1em;}
#tbl-reservation-nav td a { color: #F58201;}
#tbl-reservation-nav td.prev { text-align: left;}
#tbl-reservation-nav td.now { text-align: center;}
#tbl-reservation-nav td.next { text-align: right;}
#search-box .float { float: left; padding-right: 10px;}
#search-box .submit-button { float: right;}
#search-box dt { width: 80px; float: left;}
#search-box dd { width: 500px; float: left; background: none; padding: 0px;}
.empty { text-align: center; font-weight: bold;}
#search-box h3 { width: 290px; float: left;}
.re-search { float: right; text-align: right;}
.re-search a { font-size: 84%;}

/*
 * ---------------------------------------------------------------------------------------------
 * reservation
 * ---------------------------------------------------------------------------------------------
 */
#reserve-step { text-align: center;}
.box li { list-style-type: none; margin: 0px; padding: 0px;}
#reserve-hotel-data ul { width: 300px; float: left;}
#reserve-hotel-data .stayCharge { width: 200px; float: right;}
#stayResults table { width: 196px;}
.box-step3 #stayResults table { width: 480px;}
#stayResults td { padding-right: 8px; border-bottom: 1px dotted #aaa;}
#stayResults td.total strong { color: #c00;}
#stayResults td.charge { text-align: right;}
.form-area { background: #F1EEE7; border: 3px solid #999; border-width: 3px 0px; padding: 10px 20px; width: 570px; margin-top: 20px;}
.form-area h3 {color: #F58201; font-size: 1.1em; margin-bottom: 10px;}
.form-area dt { color: #999; }
.form-area dd { margin: 0px 0px 5px 25px;}
.form-area strong { color: #666;}
.form-area .room-indiv { border-top: 1px dotted #999; padding-top: 5px;}
.tbl-stay { width: 560px;}
.tbl-stay th { text-align: right; vertical-align: top; padding: 4px; border-bottom: 1px dotted #aaa;}
.tbl-stay td { padding: 4px; border-bottom: 1px dotted #999;}
.buttons { margin: 10px; text-align: center;}
.error-message { color: #e00;}
.box-step3 th { width: 150px;}
.btn-apply { font-weight: bold; padding: 2px 20px;}
.attention { font-weight: bold; margin: 10px; text-align: center;}
.box-complete { text-align: center;}
.box-complete h3 { margin: 10px; font-size: 1.2em;}
.box-complete p { margin-bottom: 1em;}
#stipulation { height: 600px; overflow: auto; border: 1px solid #ccc; padding: 5px; background: #fff; margin-bottom: 10px;}
.error-box { border: 2px dotted #f00; padding: 5px; margin-bottom: 10px; text-align: center; font-weight: bold; color: #f00; background: #ffeeee;}
#form-area-error { font-weight: bold; margin-bottom: 10px;}