@charset "UTF-8";
/* CSS Document */
html{
	overflow-x: hidden;
	width:100%;
	position: relative;
}

body{
	overflow-x: hidden;
	width:100%;
	position: relative;
	font-family: "中ゴシックBBB","ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Arial, "メイリオ", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
}

h2,h3,p{
	color:#41210D;
}

/*ヘッダー*/
header{
	background:url(../img/bg_header01.jpg) left top,
	url(../img/bg_header02.jpg) right top;
	background-repeat:no-repeat;
	padding:40px 0 94px;
}


header h1{
	text-align:center;
}

/*メインビジュアル*/
#mainVisual{
	position:relative;
}

#mainVisual .imgArea{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	height:600px;
}

#mainVisual .imgArea{
	text-indent:9999px;
	overflow: hidden;
}

#mainVisual h2{
	position:absolute;
	top: -60px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	z-index: 10;
}

#mainVisual .catch{
	position: absolute;
	padding: 35px;
	width: 390px;
	top: 0;
	right: 110px;
	background-color: white;
	bottom: 0;
	margin: auto;
	height: 405px;
	box-sizing: border-box;
}

#mainVisual .catch.w440{
	width:440px;
}

#mainVisual .catch h3{
	font-size:22px;
	line-height: 1.3em;
	margin-bottom:20px;
}

#mainVisual .catch .text{
	font-size:15px;
	line-height:27px;
}

/*食べ物紹介ブロック*/
#food{
	padding:100px 0 120px;
}

#food .foodBlock{
	width:700px;
	margin: 0 auto 200px;
}

#food .foodBlock:last-child{
	margin: 0 auto;
}

#food .foodWrap{
	position:relative;
	margin-bottom: 90px;
	text-align: center;
}

#food .foodWrap h2{
	font-size: 35px;
	padding-bottom: 20px;
	border-bottom: 2px solid #4DBBE6;
	display: inline-block;
	margin-bottom:46px;
	font-family: 'ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro', sans-serif;
}

#food .foodWrap h2.w900{
	width: 900px;
	position: relative;
	left: -15%;
}

#food .foodWrap h2.w800{
	width: 800px;
	position: relative;
	left: -5%;
}

#food .foodWrap:before{
	content:"";
	position:absolute;
	background-image:url(../img/niimi/cloud.png);
	background-repeat:no-repeat;
	width: 323px;
	height: 200px;
	right: -280px;
	top: 0;
	z-index: -1;
}

#food .foodBlock .foodWrap_type01:before{
	content:"";
	background-image:url(../img/niimi/sun.png);
	width: 196px;
	height: 195px;
	left: -200px;
	top: -90px;
}

#food .foodWrap .imgWrap{
	position:relative;
	margin-bottom:40px;
}

#food .foodWrap .imgWrap:before{
	content:"";
	position:absolute;
	background-image:url(../img/niimi/bg_top01.jpg);
	background-repeat:no-repeat;
	width:507px;
	height:310px;
	left:-270px;
	top:260px;
	z-index:-1;
}

#food .foodBlock .foodWrap_type01 .imgWrap:before{
	content:"";
	background-image:url(../img/niimi/bg_top02.jpg);
	left:auto;
	right:-270px;
	top:260px;
}

#food .imgWrap img{
	width:auto;
}

#food .text{
	width: 480px;
	margin: 0 auto 50px;
	line-height:27px;
	text-align: left;
	font-size: 15px;
}

#food .imgWrap02{
	margin:0 40px;
	position:relative;
}

#food .imgWrap02.col02{
	position:relative;
}

/*画像1枚*/
#food .imgWrap02.col01:before{
	content:"";
	background-image:url(../img/niimi/bg_line01.jpg);
	background-repeat:no-repeat;
	position:absolute;
	width:284px;
	height:176px;
	left: -40px;
	bottom: -50px;
	z-index: -1;
}

#food .imgWrap02.col01:after{
	content:"";
	background-image:url(../img/niimi/bg_line02.jpg);
	background-repeat:no-repeat;
	position:absolute;
	width:284px;
	height:176px;
	right: -40px;
	top: -50px;
	z-index: -1;
}

#food .imgWrap02.col01_type01:before{
	content:"";
	left: -110px;
	bottom: auto;
	top: -60px;
}

#food .imgWrap02.col01_type01:after{
	content:"";
	right: -40px;
	top:auto;
	bottom: -50px;
}


#food .imgWrap02.col01_type02:before{
	content:"";
	bottom: -60px;
	left: -40px;
}

#food .imgWrap02.col01_type02:after{
	content:none !important;
}

/*画像2枚*/
#food .imgWrap02.col02:before{
	content:"";
	background-image:url(../img/niimi/bg_line01.jpg);
	background-repeat:no-repeat;
	position:absolute;
	width:284px;
	height:176px;
	left: -103px;
	bottom: auto;
	top: -60px;
	z-index: -1;

}

#food .imgWrap02.col02:after{
	content:"";
	background-image:url(../img/niimi/bg_line02.jpg);
	background-repeat:no-repeat;
	position:absolute;
	width:284px;
	height:176px;
	right: 135px;
	top: 115px;
	z-index: -1;
}

#food .imgWrap02.col02_type01:before{
	content:"";
	left: 194px;
	bottom: -40px;
	top:auto;
}

#food .imgWrap02.col02_type01:after{
	content:"";
	right: -155px;
	top: -112px;
}

/*画像3枚*/
#food .imgWrap02.col03:before{
	content:"";
	background-image:url(../img/niimi/bg_line01.jpg);
	background-repeat:no-repeat;
	position:absolute;
	width:284px;
	height:176px;
	left: -103px;
	bottom: auto;
	top: -60px;
	z-index: -1;

}

#food .imgWrap02.col03:after{
	content:"";
	background-image:url(../img/niimi/bg_line02.jpg);
	background-repeat:no-repeat;
	position:absolute;
	width:284px;
	height:176px;
	right: 135px;
	top: 135px;
	z-index: -1;
}

#food .imgWrap02.col03 li:nth-child(2){
	float:right;
	margin-top: 50px;
}

#food .imgWrap02.col03 li:last-child{
	float:right;
	margin-top: 50px;
	margin-right: 30%;
}

#food .imgGroup li{
	float:left;
}

#food .imgGroup li:last-child{
	float:right;
	margin-top: 50px;
}



/*お店情報部分*/
#food .shopWrap h2{
	text-align:center;
	position: relative;
	top: 2px;
	z-index: 1;
}

#food .shopWrap .inner{
	position:relative;
	border-top:2px dashed #4DBBAC;
	border-bottom:2px dashed #4DBBAC;
	padding:40px 0;
	width: 600px;
	margin: auto;
}

#food .shopWrap .infoBlock{
	position: relative;
	width: 390px;
	left:200px;
}


#food .shopWrap .imgWrap{
	width: 175px;
	position: absolute;
	left: -200px;
	top: 0px;
}

#food .shopWrap .imgWrap img{
	width:100%;
}

#food .shopWrap .infoBlock h3{
	font-size:20px;
	margin-bottom:27px;
}

#food .shopWrap .infoBlock .text{
	line-height:27px;
	font-size:15px;
}

#food .shopWrap .infoData{
	width:600px;
	color:#41210D;
	font-size: 15px;
}

#food .shopWrap .infoData dt{
	float:left;
}

#food .shopWrap .infoData dt:after{
	content:"／";
}

#food .shopWrap .infoData dd{
	padding-bottom: 8px;
	line-height: 1.2em;
}

#food .shopWrap .infoGroup li{
	margin-bottom:50px;
}

#food .shopWrap .infoGroup li:last-child{
	margin-bottom:0;
}

#food .shopWrap .infoData dd a{
	color:#41210D !important;
	pointer-events:none;
}

/*スポットエリア*/
#spot{
	background-color:#DEF2FC;
	padding:47px 0 63px;
}

#spot .inner{
	width:500px !important;
	margin:auto;
	text-align:center;
}

#spot h2{
	font-size: 25px;
	position:relative;
	margin-bottom:85px;
	font-weight: bold;
}

#spot h2:before{
	content:"";
	position:absolute;
	background-image:url(../img/niimi/icon_spot.png);
	width:143px;
	height:52px;
	bottom:-65px;
	left:0;
	right:0;
	margin:auto;
}

#spot .imgWrap{
	margin-bottom:20px;
}

#spot h3{
	font-size:20px;
	padding-bottom:13px;
	border-bottom:2px solid #4DBBAC;
	display:inline-block;
	margin-bottom:30px;
}

#spot .inner>.text{
	font-size:15px;
	text-align:left;
	line-height: 1.5em;
	margin-bottom:30px;
}

#spot .inner>.text.center{
	text-align:center;
}

#spot .btnWrap{
	position:relative;
	display:inline-block;
	background-color:#04CED3;
	border-radius:30px;
	padding:10px;
	color:#FFF;
	font-size:20px;
	height:47px;
	width:250px;
	box-sizing:border-box;
	text-align:center;
}

#spot .btnWrap .text{
	position:relative;
	left:-10px;
	line-height:1.5em;
}

#spot .btnWrap .text:before{
	content: "▶";
	position: absolute;
	right: -25px;
	top: -4px;
	margin: auto;
	font-size: 17px;
}

/*エリアマップ*/
#map{
	padding: 65px 0 70px;
	text-align:center;
	background-image:url(../img/niimi/bg_map.png);
}

#map h2{
	display:inline-block;
	font-size:33px;
	font-weight: bold;
	color:#41210D;
	border-bottom:4px solid #41210D;
	padding: 0 15px 15px;
	margin-bottom: 35px;
}

#map .googleMap{
	position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px 80px;
    height: 0;
    overflow: hidden;
}

#map .googleMapWrap{
	position:relative;
	margin:auto;
	padding:0;
}

#map .googleMapWrap .title{
	position:absolute;
	top:20px;
	left:0;
	right:0;
}

#map .googleMapWrap .btnWrap{
	text-align:right;
}

#map .googleMapWrap .btnWrap .btnMap{
	display:inline-block;
	font-size:12px;
	text-align:right;
	color:#5098C6;
	margin-top:7px;
	margin-right:10px;
}

#map #mapCanvas {
	width: 100%;
	height: 630px;
	margin: auto;
}


/*地図ブロック*/
#map>.imgWrap{
	margin-bottom:50px;
}

#map>.imgWrap img{
	width:100%;
}

#mapCanvas .imgWrap{
	margin-bottom:10px;
	text-align:left;
}

#mapCanvas .imgWrap img{
	width:100%;
}

/*グーグルマップ内吹き出し*/
.detailWrap a{
	text-decoration:underline;
	color:#00F;
	word-wrap: break-word;
}

.detailWrap{
    line-height: 1.4em;
    color: #595757;
	overflow-x: hidden;
	padding-top:10px;
}

.detailWrap .name{
	font-weight:bold;
	font-size:18px;
	text-align:left;
	margin-bottom:5px;
}

.detailWrap .name .sub{
	display:block;
	font-size: 12px;
	letter-spacing: -0.1em;
}


/*フッター*/
footer{
	background-repeat:repeat-x;
	background-size: cover;
	position: relative;
	top: -30px;
	margin-bottom: -30px;
}

footer .inner{
	width: 980px;
	text-align:center;
	position: relative;
	margin: auto;
	box-sizing: border-box;
}

/*ページトップボタン　ここから*/
footer #pageTopBtn{
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index:100;
}

footer #pageTopBtn a {
	display: block;
	background-image:url(../img/btn_pagetop.png);
	background-repeat:no-repeat;
	width:60px;
	height:86px;
	z-index: 999;
	text-decoration: none;
	border-radius: 10px;
}

footer #pageTopBtn a:hover{
	opacity:0.8;
}
/*ページトップボタン　ここまで*/

/*リンク要素にカーソル乗せた時の変化*/
a:hover{
	opacity:0.9;
}

a.tel{
	text-decoration:none!important;
	cursor:default;
}

/*画面サイズが1000px以下の場合*/
@media screen and (max-width: 1260px) {
	header{
		background-size:30%;
		padding:40px 0 50px;
	}
	
	header h1{
		width: 40%;
		margin: auto;
	}
	
	header h1 img{
		width:100%;
	}
	
	
	#mainVisual .catch{
		right: 10px;
	}
}


/*画面サイズが1000px以下の場合*/
@media screen and (max-width: 1000px) {
	
	#mainVisual .catch{
		right:10px;
		width:340px;
		height:90%;
	}
	
	#mainVisual h2{
		width:20%;
		top: -40px;
	}
	#mainVisual h2 img{
		width:100%;
	}
	
	.inner{
		width:auto !important;
		padding:0 10px;
	}
	
	/*ヘッダー*/	
	header .inner{
		width:auto;
		padding:0 10px;
	}
	
	
	#food .imgWrap img{
		width:100%;
	}
	
	#food .foodWrap h2{
		font-size:32px;
	}
	
	#food .foodWrap h2.w900,
	#food .foodWrap h2.w800{
		width: auto;
		left: auto;
	}
	
	#food .imgWrap02.col03 li:last-child{
		float:right;
		margin-top: 50px;
		margin-right: 10%;
	}

	
	/*スポット*/
	#food .foodBlock{
		width:auto;
		padding: 0 20px;
	}
	
	#food .foodWrap:before {
		content: "";
		right: -130px;
		top: -78px;
		background-size: 60%;
	}
	
	#food .foodBlock .foodWrap_type01 .foodWrap:before {
		content: "";
		left: 0;
		right:auto;
		top: -100px;
		background-size: 70%;
	}
	
	/*マップ*/
	#map{
		padding: 20px 0;
	}
	
	#map .googleMapWrap{
		padding:50px 20px 10px;
		width: auto;
	}
	
	#map .inner {
		width: auto;
		padding: 50px 0;
	}
	
	/*footer*/
	footer .inner{
		width: auto;
	}
}

/*画面サイズが800px以下の場合*/
@media screen and (max-width: 800px) {
	#mainVisual .catch{
		position: relative;
		padding: 25px 20px;
		width: auto;
		top: auto;
		right: auto;
		margin-bottom: 150px;
	}
	
	#mainVisual .catch.w440{
		width:auto;
	}
	
	#mainVisual .catch h3 {
		width: auto;
		text-align: center;
	}
	
	#food .foodWrap h2{
		line-height:1.2em;
	}
	
	#food .shopWrap .infoData {
		width: auto;
	}

}


/*画面サイズが680px以下の場合*/
@media screen and (max-width: 680px) {
	header{
		background-position:left bottom,right bottom;
		background-size:30%;
		padding:20px 0 50px;
	}
	
	header h1{
		width: 80%;
		margin: auto;
	}
	
	.inner{
		width: auto !important;
		padding: 0 20px;
	}
	
	/*メインビジュアル*/
	#mainVisual .imgArea {
		height:250px;
	}
	
	#mainVisual h2 {
		width: 40%;
		top: -10%;
	}
	
	#mainVisual .catch{
		margin-bottom: 120px;
	}
	
	/*食べ物ブロック*/
	#food .foodWrap .imgWrap:before,
	#food .foodWrap_type01 .imgWrap:before{
		content: "";
		top: 60px !important;
	}
	
	
	#food .imgWrap02.col01:before,
	#food .imgWrap02.col02:before,
	#food .imgWrap02.col02_type01:before,
	#food .imgWrap02.col03:before{
		content:"";
		left: -150px;
		bottom: -30px;
		top:auto;
	}
	
	#food .imgWrap02.col01:after,
	#food .imgWrap02.col02:after,
	#food .imgWrap02.col02_type01:after,
	#food .imgWrap02.col03:after{
		content:"";
		right: -155px;
		top: -50px;
	}
	
	#food .imgWrap02.col03 li:nth-child(2){
		float:right;
		margin-top: 100px;
	}
	
	#food .imgWrap02.col03 li:last-child{
		float:left;
		margin-top: 50px;
		margin-right: auto;
	}

	
	
	#food {
		padding: 0px 0 80px;
	}
	
	#food .text{
		width: auto;
		margin: 0 auto 30px;
	}
	
	#food .foodWrap{
		margin-bottom: 80px;
	}
	
	#food .foodWrap:before {
		content: "";
		right: -180px;
		top: -100px;
		background-size: 50%;
	}
	
	#food .foodBlock .foodWrap_type01:before {
		content: "";
		left: 0;
		right: auto;
		top: -120px;
		background-size: 60%;
	}
	
	#food .foodWrap h2{
		font-size: 25px;
		padding-bottom: 10px;
		margin-bottom:20px;
	}
	
	#food .imgGroup{
		margin:auto;
	}
	
	#food .imgGroup li,
	#food .foodWrap_type01 .imgGroup li{
		width:48%;
	}
	
	#food .imgGroup li:last-child,
	#food .foodWrap_type01 .imgGroup li:last-child{
		width:48%;
		margin-top: auto;
	}
	
	#food .imgGroup li img{
		width:100%;
	}
	
	
	#food .imgWrap02.col01 img{
		width:100%;
	}
	
	#food .imgWrap02 {
		margin:0 20px;
	}
	
	/*お店情報ブロック*/
	#food .shopWrap .inner{
		width:auto;
		padding: 10px 0;
	}
	
	#food .shopWrap .imgWrap img{
		max-height:150px;
	}
	
	#food .shopWrap .infoBlock {
		position: relative;
		width: 65%;
		left: 40%;
	}
	
	#food .shopWrap .infoBlock h3 {
		font-weight:bold;
		font-size: 20px;
		margin-bottom: 10px;
	}
	
	#food .shopWrap .infoData dd a{
		pointer-events:auto;
	}
	
	/*スポットブロック*/
	#spot .inner{
		width:auto !important;
	}
	
	#food .shopWrap .imgWrap{
		position: absolute;
		left: -60%;
		top: 0px;
		width: 50%;
	}
	
	#food .shopWrap .infoData {
		width:auto;
	}
	
	/*地図ブロック*/
	#map #mapCanvas {
		height: 500px;
	}
	
	#map h2{
		margin-bottom:0;
	}
	
	#map h2 img{
		width:70%;
	}
	
	#map .googleMapWrap{
		padding:50px 20px;
	}
	
	.detailWrap .name .sub{
		letter-spacing: 0em;
	}
	
	/*フッター*/
	footer{
		top: -50px;
		margin-bottom: -50px;
	}
	
	footer .btnGroup li img{
		width: 100%;
	}
	
	footer .btnGroup li:first-child{
		margin-top:0;
		margin-bottom:20px;
	}
	
	footer .btnGroup li:first-child,
	footer .btnGroup li:last-child{
		float:none;
	}
	
	footer .btnGroup li:first-child,
	footer .btnGroup li:last-child{
		width:auto;
	}
	
	a.tel{
		text-decoration:underline !important;
		cursor:auto !important;
	}
	
}


/*画面サイズが480px以下の場合*/
@media screen and (max-width: 480px) {
	#mainVisual h2 {
		top: -7%;
	}
	
	/*食べ物ブロック*/
	#food .imgGroup li,
	#food .foodWrap_type01 .imgGroup li{
		float:none;
		width:auto;
		margin-bottom:10px;
	}
	
	#food .imgGroup li:last-child,
	#food .foodWrap_type01 .imgGroup li:last-child{
		width:auto;
		float:none;
	}
	
	
	#food .imgWrap02.col03 li:nth-child(2){
		float:none;
		margin-top: 0;
	}
	
	#food .imgWrap02.col03 li:last-child{
		float:none;
		margin-top: 0;
		margin-right: 0;
	}
	
	/*お店紹介ブロック*/
	#food .shopWrap .infoBlock {
		position: relative;
		width: auto;
		left: auto;
	}
	
	#food .shopWrap .imgWrap {
		position: relative;
		width:70%;
		left: auto;
		top: auto;
		margin-bottom: 20px;
	}
	
	#food .shopWrap .infoData dt {
		float: none;
		font-weight: bold;
		margin-bottom: 5px;
	}
	
	#food .shopWrap .infoData dt:after{
		content:none;
	}

}