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


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


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

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

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

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

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

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

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

.spotWrap h2.textTitle{
	color:#80B1DD;
}

.spotWrap .contentsWrap h3{
	color:#80B1DD;
}

.spotWrap .addressWrap .btnWrap{
	border:2px solid #80B1DD;
}

.spotWrap .addressWrap .name{
	color:#80B1DD;
}

.spotWrap .addressWrap .spotData dt{
	background-color: #80B1DD;
}

.spotWrap .contentsWrap .ruby {
	display: inline-block;
}

.spotWrap .contentsWrap .ruby_type01 {
	font-size:20px;
	font-weight:bold;
}

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

}

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

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

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

}

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


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

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

	
}

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