@charset "UTF-8";
/* CSS Document */


header #mainVisual{
	background-image:url(../img/genryu/mainVisual.jpg);
}


header nav:before{
	content: "";
	background-image: url(../img/border_top_header.png);
}

/*メインコンテンツ*/
#mainContents{
	position:relative;
	background-color:#9BD3CB;
}

#mainContents>.inner{
	background-image: url(../img/bg_inner.png);
}

#mainContents:before{
	content: "";
	background-image: url(../img/genryu/border_bottom_header.png);
}

/*スポット詳細*/
.spotWrap#spot01 h2:before{
	content:"";
	background-image:url(../img/genryu/icon_spot01.png);
}

.spotWrap#spot02 h2:before{
	content:"";
	background-image:url(../img/genryu/icon_spot03_01.png);
}

.spotWrap#spot03 h2:before{
	content:"";
	background-image:url(../img/genryu/icon_spot02.png);
}

.spotWrap#spot04 h2:before{
	content:"";
	background-image:url(../img/genryu/icon_spot03_02.png);
}

.spotWrap h2.textTitle{
	color:#3FAC9C;
}

.spotWrap .contentsWrap h3{
	color:#3FAC9C;
}

.spotWrap .addressWrap .btnWrap{
	border:2px solid #3FAC9C;
}

.spotWrap .addressWrap .name{
	color:#3FAC9C;
}

.spotWrap .addressWrap .spotData dt{
	background-color: #3FAC9C;
}

/*スポット１*/
.spotWrap#spot01 .contentsWrap .imgWrapSmall {
	display: inline-block;
	position: absolute;
	left: 308px;
	bottom: 0;
}

.spotWrap#spot01 .contentsWrap .infoWrap{
	position: absolute;
	right: 0;
	width:600px;
}

.spotWrap#spot01 .contentsWrap .infoWrap .addressWrap{
	width: 370px;
	position: absolute;
	right: 0;
}

/*スポット２*/
.spotWrap#spot02 h2.textTitle:after{
	content: "";
	left: 100%;
}

.spotWrap#spot02 .contentsWrap{
	width: 840px;
	margin: auto;
}

.spotWrap#spot02 .textWrap{
	float: left;
	width: 360px;
	line-height: 36px;
	font-size: 14px;
}

/*画面サイズが1200px以下の場合*/
@media screen and (max-width: 1200px) {

}

/*画面サイズが1100px以下の場合*/
@media screen and (max-width: 1100px) {
	
	/*スポット１*/
	.spotWrap#spot01 .contentsWrap .infoWrap {
		right: 100px;
		width: 50%;
	}
	
	.spotWrap#spot01 .contentsWrap .infoWrap{
		right: 100px;
		width: 50%;
	}
	
	.spotWrap#spot01 .contentsWrap .infoWrap .addressWrap{
		width: 370px;
		position: absolute;
		right: 0;
	}
	
	.spotWrap#spot01 .contentsWrap .imgWrap {
		width: 40%;
	}
	
	.spotWrap#spot01 .contentsWrap .imgWrapSmall {
		position: relative;
		left: 0;
		margin-top: 30px;
	}
	
}

/*画面サイズが1000px以下の場合*/
@media screen and (max-width: 1000px) {
	
	/*スポット１*/
	.spotWrap#spot01 .contentsWrap .infoWrap {
		right: 100px;
		width: 40%;
	}
	
	.spotWrap#spot01 .contentsWrap .infoWrap .addressWrap {
		width: 80%;
	}
	
	.spotWrap#spot01 .contentsWrap {
		margin-bottom: 20px;
	}

}

/*画面サイズが900px以下の場合*/
@media screen and (max-width: 900px) {
	.spotWrap#spot01 .contentsWrap{
		margin-bottom: 50px;
	}
}

/*画面サイズが800px以下の場合*/
@media screen and (max-width: 800px) {
	
	/*スポット１*/
	.spotWrap#spot01 .contentsWrap .infoWrap {
		position:relative;
		right: auto;
		width: auto;
	}
	
	.spotWrap#spot01 .contentsWrap .infoWrap .addressWrap {
		width: auto;
		position: relative;
	}
	
	.spotWrap#spot01 .contentsWrap{
		margin-bottom: 50px;
	}
	
	.spotWrap#spot01 .contentsWrap .imgWrap {
		width: 60%;
	}
	
	.spotWrap#spot01 .contentsWrap .imgWrapSmall {
		position: absolute;
		left: auto;
		right: -70%;
	}
	
	/*スポット２*/
	.spotWrap#spot02 h2.textTitle{
		width: auto;
	}
	
	.spotWrap#spot02 h2.textTitle:after{
		content: "";
		left: 100%;
	}
	
	.spotWrap#spot02 .contentsWrap{
		width: auto;
		margin: auto;
	}
	
	.spotWrap#spot02 .textWrap{
		float: none;
		width: auto;
		margin-bottom: 45px;
	}
	
}

/*画面サイズが680px以下の場合*/
@media screen and (max-width: 680px) {
	/*メニューボタン　ここから*/
	header #menuBtn {
		border:2px solid #3FAC9C;
	}
	
	header #menuBtn:before{
		content: "\f0c9";
		color:#3FAC9C;
	}
	/*ここまで*/
	
	header #mainVisual .inner h1{
		width:50%;
	}
	
	/*スポット１*/
	.spotWrap#spot01 .contentsWrap .imgWrapSmall {	
		width: 80%;
	}
	
	
}


/*画面サイズが480px以下の場合*/
@media screen and (max-width: 480px) {

	
}

/*回り込み解除クラス*/
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}