@charset "UTF-8";
/*
=====================================================================
*
*    スポット一覧
*
* ===================================================================
*/

/* セクション：検索
======================================*/

/* スポット検索結果にダイレクトで遷移した時 */
#SpotSearchSectionNoSearch {
	margin-bottom: 30px;
	padding: 15px 0;
	background-color: #38BC80;
}

	#SpotSearchSectionNoSearch .container {
		margin: 0 auto;
		width: 980px;
	}
		#SpotSearchSectionNoSearch .container .backBtn {
			position: absolute;
		}
		#SpotSearchSectionNoSearch .container h2#SpotSearchStationTitle{
			height:30px;
			line-height: 30px;
			font-size: 19px;
			text-align: center;
			color: #FFF;
			font-weight: bold;
			-webkit-font-smoothing: antialiased;
		}


#SpotSearchStationTitle{
	padding-top: 50px;
	font-size: 19px;
	text-align: left;
	color: #4c4948;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
	margin-bottom: 40px;
}




/* スポット一覧
======================================*/
#SpotIndexSection{
	clear: both;
	margin-bottom: 90px;
}




/*
=====================================================================
*
*    スポット詳細
*
* ===================================================================
*/

/* セクション：スポット詳細
======================================*/
#SpotDetailSection{
	padding-top: 50px;
	margin-bottom: 45px;
}

	#SpotDetailSection .sectionTitle{
		padding-bottom: 20px;
		border-bottom: 1px solid #e5e1e2;
		margin-bottom: 25px;
	}

	/*左*/
	#SpotDetailSection .leftSide{
		float: left;
		width: 475px;
	}

	/*右*/
	#SpotDetailSection .rightSide{
		float: right;
		width: 475px;
	}

	/*ブロック：写真*/
	#SpotDetailSection .pctBlock{}

		#SpotDetailSection .pctBlock li{
			margin-bottom: 10px;
		}

		/*注釈*/
		#SpotDetailSection .pctBlock .caution{
			padding-top: 10px;
			font-size: 90%;
			line-height: 1.5;
		}

			#SpotDetailSection .pctBlock .caution a{
				color: #2e7899;
				text-decoration: underline;
			}
			
	#SpotDetailSection .pctBlock img{
		cursor: default !important;
	}
			
			
	/*ブロック：詳細*/
	#SpotDetailSection .detailBlock{
		/* margin-bottom: 35px; */
	}

		/*タイトル*/
		#SpotDetailSection .detailBlock .title{
			padding-top: 2px;
			font-size: 180%;
			padding-bottom: 5px;
			-webkit-font-smoothing: antialiased;
			/* letter-spacing: 1px; */
			line-height: 1.3;
			color: #696766;
		}

			#SpotDetailSection .detailBlock .title img{
				vertical-align: baseline;
			}

			#SpotDetailSection .detailBlock .title span{
				/* margin-left: 5px; */
			}

		/*タイトルよみがな*/
		#SpotDetailSection .detailBlock .titleKana{
			font-size: 85%;
			margin-bottom: 14px;
			padding-top: 5px;
			line-height: 1.3;
		}

		/*sns*/
		#SpotDetailSection .detailBlock .sns{
			margin-bottom: 40px;
		}

		/*テキスト*/
		#SpotDetailSection .detailBlock .text{
			margin-bottom: 40px;
		}

			#SpotDetailSection .detailBlock .text .lead{
				font-size: 125%;
				margin-bottom: 18px;
			}

			#SpotDetailSection .detailBlock .text .desc{
				line-height: 1.7;
			}

		/*テーブル箇所*/
		#SpotDetailSection .detailBlock table{
			width: 100%;
			border-top: 1px solid #e4e0e1;
		}

			#SpotDetailSection .detailBlock table th,
			#SpotDetailSection .detailBlock table td{
				border-bottom: 1px solid #e4e0e1;
				padding: 10px 0;
				font-weight: normal;
			}

			#SpotDetailSection .detailBlock table th{
				width: 134px;
				padding-left: 5px;
			}

		/*ボックス：チェックインと気になる数*/
		#SpotDetailSection .detailBlock .socialBox{
			padding: 13px 30px 13px 18px;
			margin-bottom: 10px;
			background-color: #f9f9f9;
			border-bottom: 1px solid #e4e0e1;
			font-size: 110%;
		}

			#SpotDetailSection .detailBlock .socialBox .checkin{
				float: left;
				width: 160px;
				height: 30px;
				line-height: 32px;
				padding: 0 30px 0 27px;
				border-right: 1px solid #e4e0e1;
				background: url(/content/images/spot/icon/check.png) left center no-repeat;
			}
			/*ie7*/
			*:first-child+html #SpotDetailSection .detailBlock .socialBox .checkin{ position: relative;}
			/*ie6*/
			* html #SpotDetailSection .detailBlock .socialBox .checkin{ position: relative;}

				#SpotDetailSection .detailBlock .socialBox .checkin .num{
					display: block;
					float: right;
					width: 60px;
					text-align: right;
					font-size: 170%;
					font-family:'Avenir LT W01_55 Roman1475520';
					-webkit-font-smoothing: antialiased;
				}
				/*ie7*/
				*:first-child+html #SpotDetailSection .detailBlock .socialBox .checkin .num{ float: none; position: absolute; right:30px; top:0px; }
				/*ie6*/
				* html #SpotDetailSection .detailBlock .socialBox .checkin .num{ float: none; position: absolute; right:30px; top:0px; }

			#SpotDetailSection .detailBlock .socialBox .interested{
				float: left;
				width: 160px;
				height: 30px;
				line-height: 32px;
				padding: 0 0 0 25px;
				background: url(/content/images/spot/icon/favorite.png) left center no-repeat;
				margin-left: 20px;
			}
			/*ie7*/
			*:first-child+html #SpotDetailSection .detailBlock .socialBox .interested{ position: relative; margin-left: 0px; left: 20px;}
			/*ie6*/
			* html #SpotDetailSection .detailBlock .socialBox .interested{ position: relative; margin-left: 0px; left: 20px;}

				#SpotDetailSection .detailBlock .socialBox .interested .num{
					display: block;
					float: right;
					width: 60px;
					text-align: right;
					font-size: 170%;
					font-family:'Avenir LT W01_55 Roman1475520';
					-webkit-font-smoothing: antialiased;
				}
				/*ie7*/
				*:first-child+html #SpotDetailSection .detailBlock .socialBox .interested .num{ float: none; position: absolute; right:0px; top:0px; }
				/*ie6*/
				* html #SpotDetailSection .detailBlock .socialBox .interested .num{ float: none; position: absolute; right:0px; top:0px; }


	/*ブロック：各特典*/
	#SpotDetailSection .benefitBlock{
		margin-top: 35px;
	}

		/*ボックス：クーポン*/
		#SpotDetailSection .benefitBlock .couponBox{
			margin-bottom: 15px;
			color: #fff;
		}

			#SpotDetailSection .benefitBlock .couponBox .pct{
				float: left;
				width: 83px;
				padding-top: 5px;
				text-align: center;
			}

			#SpotDetailSection .benefitBlock .couponBox .detail{
				float: left;
				width: 392px;
				padding-top: 3px;
				background: url(/content/images/spot/bg/coupon-top.png) left top no-repeat;
			}

				#SpotDetailSection .benefitBlock .couponBox .detail .innerBottom{
					padding-bottom: 3px;
					background: url(/content/images/spot/bg/coupon-bottom.png) left bottom no-repeat;
				}

				#SpotDetailSection .benefitBlock .couponBox .detail .innerMiddle{
					padding: 13px 20px 10px 27px;
					background: url(/content/images/spot/bg/coupon.png) left top no-repeat;
				}

				#SpotDetailSection .benefitBlock .couponBox .detail .title{
					font-size: 110%;
					font-weight: bold;
					padding: 0 0 3px 3px;
					border-bottom: 1px solid #9bdcde;
					margin-bottom: 7px;
				}

				#SpotDetailSection .benefitBlock .couponBox .detail p{
					font-size: 85%;
					line-height: 1.5;
				}

		/*ボックス：コイン*/
		#SpotDetailSection .benefitBlock .coinBox{
			margin-bottom: 15px;
			color: #fff;
		}

			#SpotDetailSection .benefitBlock .coinBox .pct{
				float: left;
				width: 83px;
				padding-top: 7cccpx;
				text-align: center;
			}

			#SpotDetailSection .benefitBlock .coinBox .detail{
				float: left;
				width: 392px;
				padding-top: 3px;
				background: url(/content/images/spot/bg/coin.png) left top no-repeat;
			}

				#SpotDetailSection .benefitBlock .coinBox .detail .innerBottom{
					padding-bottom: 3px;
					background: url(/content/images/spot/bg/coin.png) left bottom no-repeat;
				}

				#SpotDetailSection .benefitBlock .coinBox .detail .innerMiddle{
					padding: 12px 20px 10px 27px;
					background: url(/content/images/spot/bg/coin.png) left center no-repeat;
				}

				#SpotDetailSection .benefitBlock .coinBox .detail .bonus{
					float: left;
					width: 115px;
					padding-top: 3px;
					font-size: 130%;
					font-family:'Avenir LT W01_55 Roman1475520';
					-webkit-font-smoothing: antialiased;
				}

					#SpotDetailSection .benefitBlock .coinBox .detail .bonus span{
						font-size: 200%;
						line-height: 1.1;
						letter-spacing: 0.1em;
					}

				#SpotDetailSection .benefitBlock .coinBox .detail p{
					float: left;
					border-left: 1px solid #fbe498;
					padding-left: 10px;
					font-size: 90%;
					line-height: 1.5;
				}


	/*ブロック：追加情報*/
	#SpotDetailSection .moreInfoBlock{ padding-top: 40px; }


		#SpotDetailSection .moreInfoBlock .title{
			margin-bottom: 5px;
		}

		/*ボックス：キャンペーン*/
		#SpotDetailSection .moreInfoBlock .campaignBox{
			margin-bottom: 5px;
		}

			#SpotDetailSection .moreInfoBlock .campaignBox .banner{
				margin-bottom: 10px;
			}



		/*ボックス：特集*/
		#SpotDetailSection .moreInfoBlock .featureBox{
			margin-top: 10px;
		}
			#SpotDetailSection .moreInfoBlock .featureBox a.banner{
				background: #faf8f8;
				padding: 15px;
				display: block;
				color: #797776;
			}
			#SpotDetailSection .moreInfoBlock .featureBox a.banner:hover{
				background: #f2f0f0;
			}
			
				
				#SpotDetailSection .moreInfoBlock .featureBox .img{
					float: left;
					width: 120px;	
				}
	
				#SpotDetailSection .moreInfoBlock .featureBox .title{
					margin-bottom: 5px;
					float: right;
					width: 305px;
				}
					#SpotDetailSection .moreInfoBlock .featureBox .title .label{
						display: block;
						padding-top: 10px;
						margin-bottom: 13px;
					}
					
					#SpotDetailSection .moreInfoBlock .featureBox .title p{
						font-size: 115%;
						text-indent: 2px;	
					}




	/* -- 写真がない時の地図 -- */
	#SpotMap{
		padding-bottom: 10px;
	}
		#SpotMap .zMap{
			width:475px;
			height:475px;
			background-color: #E9E9E9;
		}

	/* -- 写真がある場合の地図 -- */

	#SpotMapSection{
		padding-bottom: 50px;
	}
		#SpotMapSection .zMap{
			width:980px;
			height:400px;
			background-color: #E9E9E9;
		}


/* セクション：スポットエラー
======================================*/
#SpotErrorSection {
	padding-top: 50px;
	margin-bottom: 50px;
}

	#SpotErrorSection .sorryErrorBlock{
		width: 980px;
		margin: 0 auto;
		background: url(/content/images/spot/bg/delete-top.png) no-repeat left top;
		padding-top: 7px;
	}

		#SpotErrorSection .sorryErrorBlock .bottom{
			background: url(/content/images/spot/bg/delete-bottom.png) no-repeat left bottom;
			padding-bottom: 7px;
		}

		#SpotErrorSection .sorryErrorBlock .inner{
			width: 980px;
			background: #F5F3F3;
			padding: 40px 0;
		}

			#SpotErrorSection .sorryErrorBlock .inner .image{
				width: 290px;
				margin: 0 auto 25px auto;
			}

			#SpotErrorSection .sorryErrorBlock .inner p{
				text-align: center;
				font-size: 120%;
				line-height: 1.7;
				color: #a5a4a3;
				margin-bottom: 50px;
			}

			#SpotErrorSection .sorryErrorBlock .inner .btn{
				width: 260px;
				margin: 0 auto;
			}


/*
=====================================================================
*
*    レコメンド記事部分　上書き
*
* ===================================================================
*/

#RecommendEngine{
	margin-bottom: 100px;
	padding-top: 80px;
}





/*
=====================================================================
*
*    Retina対応
*
* ===================================================================
*/

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

	#SearchSection .propertyBlock .genreBox li a{
		background-image: url(/content/images/spot/btn/genre@2x.png);
		background-size: 980px 60px;
	}
	#SearchSection .clearSortBlock .sortBox li a{
		background-image: url(/content/images/spot/btn/sort@2x.png);
		background-size: 184px 40px;
	}
	#SpotDetailSection .detailBlock .socialBox .checkin{
		background-image: url(/content/images/spot/icon/check@2x.png);
		background-size: 18px 16px;
	}
	#SpotDetailSection .detailBlock .socialBox .interested{
		background-image: url(/content/images/spot/icon/favorite@2x.png);
		background-size: 17px 16px;
	}
	#SearchSection .clearSortBlock .sortBox{
		background: url(../images/spot/bg/sort.png) no-repeat 0px 0px;
		background-size: 70px 20px;
	}
	#SearchSection #TrendKeyword{
		background: url(../images/spot/bg/trend-keyword@2x.png) no-repeat 0px 0px;
		background-size: 980px 48px;
	}
	#SearchSection #TrendKeyword ul li a{
		background: url(../images/spot/bg/trend-keyword-icon@2x.png) no-repeat 0px 0px;
		background-size: 18px 18px;
	}
}