@charset "utf-8";
/* ===================================================================
CSS information

 file name  :detail.css
 style info :宿・ホテル検索 - プラン詳細
 
================================================================== */

/*----------------------------------------------------
　.planDetailBody - プラン詳細情報
----------------------------------------------------*/

#main p {
	line-height: 1.4;
}

#main p.planNote {
	line-height: 1.4;
	margin-top: 10px;
}


/* 予約・空室確認アンカー */
#main div.toReserve {
	background-color: #E1F0F7;
	padding: 5px 10px;
	width: 720px;
	margin-top: 20px;
	text-align: center;
}

#main div.toReserve p.btn {
	text-align: center;
}

#main div.toReserve p.btn a {
	display: block;
	width: 150px;
	height: 30px;
	background: url(../../../images/plan/btn_toreserve.jpg) left top no-repeat;
	text-indent: -9999px;
	margin: 0 auto;
}

#main div.toReserve p.btn a:hover {
	background-position: left bottom;
}



/* プラン写真 */
#main div#planPhoto {
	width: 740px;
	margin: 0 0 10px 0;
}

#main div#planPhoto div {
	width: 230px;
	float: left;
	margin-right: 10px;
	padding: 5px;
	background-color: #F6F6F6;
}

#main div#planPhoto div.last {
	margin-right: 0;
}

#main div#planPhoto div p.photo {
	width: 230px;
	text-align: center;
  border: 1px solid #EFEFEF;
  text-align: center;
  margin: 0;
  overflow: hidden;
	background-color: #FFFFFF;
}


#main div#planPhoto div p.caption {
	font-size: 10px;
	margin-top: 5px;
}



/* プラン情報 */
#main h3.top {
	margin-top: 10px;
}

#main table.information th {
	background: url(../../../images/common/bg_th.jpg) 0 0 repeat-x #F6F6F6;
	width: 130px;
}

#main table.information th span {
	background: url(../../../images/common/item/icon_arrow7.jpg) 0 2px no-repeat;
	padding-left: 18px;
	margin-left: 0;
}

#main table.information td {
	line-height: 1.4;
	padding-left: 10px;
	padding-right: 10px;
}

#main table.information td a {
	color: #333333;
	text-decoration: none;
}

#main table.information td a:hover {
	color: #666666;
	text-decoration: none;
}



/* 予約内容確認 */
#main div#reservePartner {
	width: 740px;
}

#main div#reservePartner p {
	float: left;
	width: 650px;
}

#main div#reservePartner p.logo {
	float: right;
	width: 90px;
}

#main table.reserveConfirm {
	margin-top: 5px;
	width: 740px;
	border: 2px solid #66CCFF;
}

#main table.reserveConfirm th {
	width: 120px;
	border: 1px solid #B3E5FF;
	background: url(../../../images/plan/bg_reservetable.jpg) 0 0 repeat-x #EFFAFF;
	padding: 10px;
}

#main table.reserveConfirm th span {
	font-size: 10px;
	font-weight: normal;
	margin-top: 8px;
}

#main table.reserveConfirm td {
	border: 1px solid #B3E5FF;
	padding: 10px;
	font-size: 14px;
}

#main table.reserveConfirm td.date {

}

#main table.reserveConfirm td.num p {
	float: left;
	margin-right: 5px;
}

#main table.reserveConfirm td.num span {
	font-size: 10px;
	margin-right: 10px;
}

#main table.reserveConfirm td.num p.checkPrice a {
	display: block;
	width: 170px;
	height: 26px;
	text-indent: -9999px;
	background: url(../../../images/plan/btn_checkprice.jpg) left top no-repeat;
}

#main table.reserveConfirm td.num p.checkPrice a:hover {
	background-position: left bottom;
}

#main table.reserveConfirm td.num span.caption {
	display: inline-block;
	float: right;
	margin-top: 4px;
	margin-right: 0;	
}

#main table.reserveConfirm td.num span.caption a {
	background: url(../../../images/common/item/icon_pagedown.jpg) 0 0 no-repeat;
	padding-left: 15px;
}

#main table.reserveConfirm td.num p.checkPrice input {
	margin: 0 auto;
	display: block;
	width: 240px;
	height: 30px;
	text-indent: -9999px;
	background: url(../../../images/plan/btn_checkprice.jpg) left top no-repeat;
	cursor: pointer;
}

#main div.checkBox {
	text-align: center;
	padding: 10px 0 10px 0;
	width: 740px;
	height: 40px;
	background: url(../../../images/plan/bg_reservebox.jpg) center 10px no-repeat;
}

#main div.checkBox p.checkPrice {
	text-align: center;
}






#main table.reserveConfirm td.stock {
	font-size: 12px;
}

#main table.reserveConfirm td.stock p {

}

#main table.reserveConfirm td.stock p span {
	font-size: 16px;
	font-weight: bold;
	color: #FF0000;
	margin: 0 5px;
}

#main table.reserveConfirm td.stock p.toCalendar {
	float: left;
}

#main table.reserveConfirm td.stock p.toCalendar a {
	display: block;
	width: 180px;
	height: 25px;
	background: url(../../../images/plan/btn_tocalendar.jpg) 0 0 no-repeat;
	text-indent: -9999px;
}

#main table.reserveConfirm td.stock p.toCalendar a:hover {
	background-position: left bottom;
}

#main table.reserveConfirm td.price {
	font-size: 12px;
}

#main table.reserveConfirm td.price p span {
	font-size: 16px;
	font-weight: bold;
	color: #FF0000;
}

#main table.reserveConfirm td.price p {
	margin-bottom: 10px;
}

#main table.reserveConfirm td.price p.ex {
	float: right;
	font-size: 12px;
	margin-top: 4px;
}

#main table.reserveConfirm td.btnToReserve {
	border-top: 2px solid #66CCFF;
	background: url(../../../images/plan/bg_reservebtn.jpg) left bottom repeat-x;
}

#main table.reserveConfirm td.btnToReserve p.btn {
	width: 240px;
	text-align: center;
	margin: 0 auto;
}

#main table.reserveConfirm td.btnToReserve p.btn a {
	display: block;
	width: 240px;
	height: 40px;
	background: url(../../../images/plan/btn_topartners.jpg) left top no-repeat;
	text-indent: -9999px;
}

#main table.reserveConfirm td.btnToReserve p.btn a:hover {
	background-position: left bottom;
}




/* 予約時確認事項 注釈 */
#main div#statement {
	width: 738px;
	margin-top: 20px;
	border: 1px solid #DDDDDD;
}

#main div#statement h4 {
	width: 718px;
	height: 14px;
	padding: 8px 10px;
	background: url(../../../images/common/bg_th.jpg) 0 0 repeat-x #F6F6F6;
	border-bottom: 1px solid #DDDDDD;
}

#main div#statement h4 span {
	display: block;
	border-left: 3px solid #0099CC;
	padding-left: 8px;
	font-weight: bold;
}

#main div#statement dl.statement_a {
	width: 345px;
	float: left;
	margin-right: 8px;
	padding: 5px 10px 10px 10px;
}

#main div#statement dl.statement_a dt {
	width: 105px;
	float: left;
	border-top: 1px dotted #999999;
	padding: 5px 0 5px 15px;
	background: url(../../../images/common/item/icon_arrow6.jpg) 0 4px no-repeat;
}

#main div#statement dl.statement_a dd {
	width: 225px;
	float: left;
	border-top: 1px dotted #999999;
	padding: 5px 0;
}

#main div#statement dl.statement_a dd.price {
	color: #FF0000;
}

#main div#statement dl.statement_a dt.price,
#main div#statement dl.statement_a dd.price {
	border-top: 2px solid #CCCCCC;
}


#main div#statement dl.statement_b {
	width: 345px;
	float: left;
	padding: 5px 10px 0 10px;
}

#main div#statement dl.statement_b dt {
	border-top: 1px dotted #999999;
	padding: 5px 0 5px 15px;
	background: url(../../../images/common/item/icon_arrow6.jpg) 0 4px no-repeat;
}

#main div#statement dl.statement_b dd {
	border-top: 1px dotted #999999;
	padding: 5px 0 15px;
}

#main div#statement dl.statement_a dt.top,
#main div#statement dl.statement_a dd.top,
#main div#statement dl.statement_b dt.top {
	border-top: none;
}


/* 子ども料金・キャンセル料金　注釈 */
#main div#additional {
	width: 740px;
	margin-top: 10px;
}

#main div#additional div#child {
	width: 363px;
	float: left;
	margin-right: 10px;
	border: 1px solid #DDDDDD;
}

#main div#additional div#child h4 {
	width: 343px;
	height: 14px;
	padding: 8px 10px;
	background: url(../../../images/common/bg_th.jpg) 0 0 repeat-x #F6F6F6;
	border-bottom: 1px solid #DDDDDD;
}

#main div#additional div#child h4 span {
	display: block;
	border-left: 3px solid #0099CC;
	padding-left: 8px;
	font-weight: bold;
}

#main div#additional div#child dl {
	padding: 5px 10px 0 10px;
}

#main div#additional div#child dl dt {
	width: 138px;
	float: left;
	border-top: 1px dotted #999999;
	padding: 5px 15px 5px 5px;
	background: url(../../../images/common/item/icon_arrow6.jpg) right 4px no-repeat;
}

#main div#additional div#child dl dd {
	width: 170px;
	float: left;
	border-top: 1px dotted #999999;
	padding: 5px 0 5px 15px;
}

#main div#additional div#child dl dt.top,
#main div#additional div#child dl dd.top {
	border-top: none;
}

#main div#additional div#cancel {
	width: 363px;
	float: left;
	border: 1px solid #DDDDDD;
}

#main div#additional div#cancel h4 {
	width: 343px;
	height: 14px;
	padding: 8px 10px;
	background: url(../../../images/common/bg_th.jpg) 0 0 repeat-x #F6F6F6;
	border-bottom: 1px solid #DDDDDD;
}

#main div#additional div#cancel h4 span {
	display: block;
	border-left: 3px solid #0099CC;
	padding-left: 8px;
	font-weight: bold;
	float: left;
}

#main div#additional div#cancel h4 span.more {
	display: block;
	float: right;
	border-left: none;
	font-weight: normal;
	font-size: 10px;
}

#main div#additional div#cancel h4 span.more a {
	background: url(../../../images/common/item/icon_pagedown.jpg) 0 0 no-repeat;
	padding-left: 15px;
}

#main div#additional div#cancel dl {
	padding: 5px 10px 0 10px;
}

#main div#additional div#cancel dl dt {
	width: 143px;
	float: left;
	border-top: 1px dotted #999999;
	padding: 5px 15px 5px 0;
	background: url(../../../images/common/item/icon_arrow6.jpg) right 4px no-repeat;
}

#main div#additional div#cancel dl dd {
	width: 170px;
	float: left;
	border-top: 1px dotted #999999;
	padding: 5px 0 5px 15px;
}

#main div#additional div#cancel dl dt.top,
#main div#additional div#cancel dl dd.top {
	border-top: none;
}



/* グレードアッププラン */
#main div.gradeupPlan {
	margin: 0 0 10px 0;
	background: url(../../../images/common/item/line_dot.jpg) left bottom repeat-x;
	padding-bottom: 10px;
}

#main div.gradeupPlan div.info h4 {
	font-size: 12px;
	margin-bottom: 3px;
}

#main div.gradeupPlan div.info h4 span {
	font-size: 14px;
	font-weight: bold;
	color: #FF0066;
}

#main div.gradeupPlan div.info p strong {
	font-size: 14px;
	font-weight: bold;
}

#main div.gradeupPlan p strong a {
	background: url(../../../images/common/item/icon_arrow9.jpg) 0 2px no-repeat;
	padding-left: 15px;
}

#main div.gradeupPlan div.info {
	float: left;
	width: 365px;
	margin-right: 10px;
}

#main div.gradeupPlan div.info p.summary {
	font-size: 10px;
	margin-top: 3px;
}

#main div.gradeupPlan p.photo {
	float: left;
	width: 100px;
	margin-right: 10px;
}

#main div.gradeupPlan div.price {
	float: right;
	width: 255px;
}

#main div.gradeupPlan div.price p.charge {
	background-color: #F7F7F7;
	padding: 9px;
	font-size: 10px;
	margin-bottom: 5px;
	border: 1px solid #EFEFEF;
}

#main div.gradeupPlan div.price p.charge span {
	font-size: 12px;
	font-weight: bold;
	color: #FF0033;
	margin-left: 15px;
}

#main div.gradeupPlan div.price p.view {
	float: left;
	margin-right: 5px;
}

#main div.gradeupPlan div.price p.reserve {
	float: left;
}

#main div.gradeupPlan div.price p.view a {
	display: block;
	width: 120px;
	height: 25px;
	background: url(../../../images/plan/btn_gradeup_detail.jpg) 0 0 no-repeat;
	text-indent: -9999px;
}

#main div.gradeupPlan div.price p.reserve a {
	display: block;
	width: 130px;
	height: 25px;
	background: url(../../../images/plan/btn_gradeup_reserve.jpg) 0 0 no-repeat;
	text-indent: -9999px;
}


/* 設備 */
#main table.information td a {
	padding: 0;
	background: none;
}

.planDetailBody #main h3 span {
	display: inline-block;
	float: right;
	padding-right: 10px;
	font-size: 10px;
	font-weight: normal;
	color: #333333;
}

.planDetailBody #main h4.addinfo {
	border-left: 3px solid #FF9900;
	padding-left: 5px;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 5px;
}

#main ul.addinfo li {
	float: left;
	margin-right: 15px;
	display:inline;
	white-space:nowrap; /* IEの改行回避用 */
}

#main ul.addinfo li a {
	color: #333333;
	text-decoration: none;
}

#main ul.addinfo li a:hover {
	color: #666666;
	text-decoration: none;
}

.hotelInfoBody #main p {
	line-height: 1.5;
}


/* リファラへリコメンド */
#main h3.recttl {
	width: 740px;
	margin: 0;
	background: url(../../../images/plan/rec_ttl.jpg) left top no-repeat;
	color: #FFFFFF;
	height: 20px;
	font-size: 16px;
}

#main h3.recttl strong {
	float:left;
}


#main h3.recttl span {
	color:#333333;
	display:inline-block;
	float:right;
	font-size:10px;
	font-weight:normal;
	padding-right:10px;
}


#main h3.recttl a {
	color: #FFFFFF;
	font-size: 12px;
	padding-right: 10px;
}

#main div.refRecommend {
	width: 720px;
	padding: 10px 10px 0 10px;
	background: url(../../../images/plan/rec_bg.jpg) left bottom no-repeat;
	margin-bottom: 10px;
}

#main div.refRecommend div.plan {
	float: left;
	margin: 0 10px 10px 0;
	width: 230px;
}

#main div.refRecommend div.plan p {
	width: 230px;
	text-align: center;
}

#main div.refRecommend div.plan p.recphoto {
	height: 150px;
}

#main div.refRecommend h4 {
	width: 220px;
	margin: 5px 0 0 0;
	padding: 5px;
	font-weight:bold;
}

#main div.refRecommend h4 a {
	background: url(../../../images/common/item/icon_arrow2.jpg) 0 0 no-repeat;
	padding-left: 15px;
	line-height: 1.4;
}