@charset "utf-8";



/* TOP */

.home {
	background-image: url(/shared/site_foodpark/images/common/back_img_01.png);
	background-repeat: repeat;
	background-position: center center;
	background-size: 38px 38px;
}





#home-navigation {
	z-index: 2;
	position: relative;
	width:100%;
	height: 58.854vw;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.home_map {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 58.854vw;
	margin: 0 auto;
	z-index: 11;
}


#home-navigation-sp {
	z-index: 2;
	position: relative;
	width:100%;
	height: 87.959vw;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.home_map_sp {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 87.959vw;
	margin: 0 auto;
	z-index: 11;
}


/* タイトル */ 
#btn_200 {
	position: absolute;
	top: 1vw;
	left: 30vw;
	width: 40vw;
	height: auto;
	z-index: 50;
	opacity: 1;
}
.btn_200_1 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 54;
}

#btn_200_sp {
	position: absolute;
	top: 2vw;
	left: 5vw;
	width: 90vw;
	height: auto;
	z-index: 50;
	opacity: 1;
}
.btn_200_1_sp {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 54;
}


/* タイトル(飛行機) */ 
#btn_100 {
	position: absolute;
	top: 11vw;
	left: 13vw;
	width: 23vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_100_1 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 54;
}

#btn_100_sp {
	position: absolute;
	top: 23vw;
	left: 13vw;
	width: 40vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_100_1_sp {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 54;
}

.PlaneSlide {
	animation: PlaneSlideIn 13s infinite;
}

/* CSSアニメーションの設定 */
@keyframes PlaneSlideIn {
	0% {
		opacity: 1;/*初期状態では透明に*/
		transform: translateX(100vw);
	}
	100% {
		opacity: 1;
		transform: translateX(-70vw);
	}
}



/* タベ・マイカ */ 
#btn_101 {
	position: absolute;
	top: 30vw;
	left: 73vw;
	width: 25vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_101_1 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 54;
}
.btn_101_2 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 53;
}

#btn_101_sp {
	position: absolute;
	top: 21vw;
	left: 33vw;
	width: 60vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_101_1_sp {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 54;
}
.btn_101_2_sp {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 53;
}


/* 浜名湖グルメ */ 
#btn_102 {
	position: absolute;
	top: 28.5vw;
	left: 3vw;
	width: 13vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_102_1 {
	position: absolute;
	width: 8vw;
	top: 2vw;
	left: 5vw;
	height: auto;
	z-index: 54;
}
.btn_102_2 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 53;
	animation: horizontal1 1s ease-in-out infinite alternate;
}
.btn_102_2 span {
	display: block;
	animation: vertical 1s ease-in-out infinite alternate;
}
@-webkit-keyframes horizontal1 {
	0% { transform:translateX( -12px); }
	100% { transform:translateX(  0px); }
}
@-webkit-keyframes horizontal2 {
	0% { transform:translateX(  12px); }
	100% { transform:translateX(  0px); }
}
@-webkit-keyframes vertical {
	0% { transform:translateY( -5px); }
	100% { transform:translateY(  0px); }
}



/* フルーツ狩り */ 
#btn_103 {
	position: absolute;
	top: 24vw;
	left: 32vw;
	width: 8vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_103_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}
.btn_103_2 {
	position: absolute;
	top: 3.5vw;
	left: 2.7vw;
	width: 2.6vw;
	height: auto;
	z-index: 53;
}


/* 浜松名産ラボ */ 
#btn_104 {
	position: absolute;
	top: 40vw;
	left: 30vw;
	width: 5.5vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_104_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}


/* 浜松出世マーケット */ 
#btn_105 {
	position: absolute;
	top: 37vw;
	left: 40vw;
	width: 9vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_105_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}
.btn_105_2 {
	position: absolute;
	top: 4vw;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 53;
}


/* 浜松パワーフード */ 
#btn_106 {
	position: absolute;
	top: 31.5vw;
	left: 50vw;
	width: 15vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_106_1 {
	position: absolute;
	top: 0;
	left: 7.2vw;
	width: 7.5vw;
	height: auto;
	z-index: 54;
}
.btn_106_2 {
	position: absolute;
	top: 3.9vw;
	left: 6.5vw;
	width: 8vw;
	height: auto;
	z-index: 53;
}
.btn_106_3 {
	position: absolute;
	top: 3.5vw;
	left: 0;
	width: 10vw;
	height: auto;
	z-index: 52;
}


/* 浜松グルメクイズ */ 
#btn_107 {
	position: absolute;
	top: 46vw;
	left: 45vw;
	width: 10vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_107_1 {
	position: absolute;
	top: 2.5vw;
	left: 0;
	width: 7vw;
	height: auto;
	z-index: 54;
}
.btn_107_2 {
	position: absolute;
	top: 0;
	left: 7.2vw;
	width: 3.5vw;
	height: auto;
	z-index: 53;
}


/* 浜松グルメ放送部 */ 
#btn_108 {
	position: absolute;
	top: 43vw;
	left: 58vw;
	width: 11.5vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_108_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}


/* ミカン */ 
#btn_109 {
	position: absolute;
	top: 18vw;
	left: 16vw;
	width: 16vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_109_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}


/* ぶどう */ 
#btn_110 {
	position: absolute;
	top: 18vw;
	left: 35vw;
	width: 7.8vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_110_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}


/* お茶 */ 
#btn_111 {
	position: absolute;
	top: 21vw;
	left: 74vw;
	width: 4.5vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_111_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}


/* はままつのやさい */ 
#btn_112 {
	position: absolute;
	top: 51vw;
	left: 55vw;
	width: 6.5vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_112_1 {
	position: absolute;
	top: 0vw;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}



/* はままつのくだもの */ 
#btn_113 {
	position: absolute;
	top: 23.5vw;
	left: 22vw;
	width: 6.1vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_113_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}



/* はままつ食の体験エリア */ 
#btn_114 {
	position: absolute;
	top: 29vw;
	left: 68vw;
	width: 9.2vw;
	height: auto;
	z-index: 60;
	opacity: 0;
}
.btn_114_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 64;
}



#btn_102 img:hover, 
#btn_103 img:hover, 
#btn_104 img:hover, 
#btn_105 img:hover, 
#btn_106 img:hover, 
#btn_107 img:hover, 
#btn_108 img:hover, 
#btn_109 img:hover, 
#btn_110 img:hover, 
#btn_111 img:hover,
#btn_112 img:hover,
#btn_113 img:hover,
#btn_114 img:hover {
	transition: 0.6s;
	transform: scale(1.1);
}


/* キャラクター1 */ 
#btn_201 {
	position: absolute;
	top: 38vw;
	left: 26vw;
	width: 4vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_201_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}

.btn_201_1 img {
	display: block;
	position: absolute;
	width: inherit;
	height: inherit;
	opacity: 0;
	animation: slideAnime 12s ease infinite;
}
.btn_201_1 .img1, 
.btn_202_1 .img1, 
.btn_203_1 .img1, 
.btn_204_1 .img1 {
	width: 3vw;
	height: auto;
}
.btn_201_1 .img2, 
.btn_202_1 .img2, 
.btn_203_1 .img2, 
.btn_204_1 .img2 {
	width: 2.5vw;
	height: auto;
}
.btn_201_1 .img3, 
.btn_202_1 .img3, 
.btn_203_1 .img3, 
.btn_204_1 .img3 {
	width: 3.2vw;
	height: auto;
}
.btn_201_1 .img4, 
.btn_202_1 .img4, 
.btn_203_1 .img4, 
.btn_204_1 .img4 {
	width: 2.5vw;
	height: auto;
}


.btn_201_1 img:nth-of-type(1) { animation-delay: 0s }
.btn_201_1 img:nth-of-type(2) { animation-delay: 3s }
.btn_201_1 img:nth-of-type(3) { animation-delay: 6s }
.btn_201_1 img:nth-of-type(4) { animation-delay: 9s }


/* キャラクター2 */ 
#btn_202 {
	position: absolute;
	top: 24vw;
	left: 47.4vw;
	width: 3.1vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_202_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}
.btn_202_1 img {
	display: block;
	position: absolute;
	width: inherit;
	height: inherit;
	opacity: 0;
	animation: slideAnime 12s ease infinite;
}

.btn_202_1 img:nth-of-type(1) { animation-delay: 0s }
.btn_202_1 img:nth-of-type(2) { animation-delay: 3s }
.btn_202_1 img:nth-of-type(3) { animation-delay: 6s }
.btn_202_1 img:nth-of-type(4) { animation-delay: 9s }


/* キャラクター3 */ 
#btn_203 {
	position: absolute;
	top: 40vw;
	left: 51vw;
	width: 4vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_203_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}
.btn_203_1 img {
	display: block;
	position: absolute;
	width: inherit;
	height: inherit;
	opacity: 0;
	animation: slideAnime 12s ease infinite;
}

.btn_203_1 img:nth-of-type(1) { animation-delay: 0s }
.btn_203_1 img:nth-of-type(2) { animation-delay: 3s }
.btn_203_1 img:nth-of-type(3) { animation-delay: 6s }
.btn_203_1 img:nth-of-type(4) { animation-delay: 9s }


/* キャラクター4 */ 
#btn_204 {
	position: absolute;
	top: 27vw;
	left: 76vw;
	width: 3.1vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_204_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}
.btn_204_1 img {
	display: block;
	position: absolute;
	width: inherit;
	height: inherit;
	opacity: 0;
	animation: slideAnime 12s ease infinite;
}

.btn_204_1 img:nth-of-type(1) { animation-delay: 0s }
.btn_204_1 img:nth-of-type(2) { animation-delay: 3s }
.btn_204_1 img:nth-of-type(3) { animation-delay: 6s }
.btn_204_1 img:nth-of-type(4) { animation-delay: 9s }



@keyframes slideAnime{
	0% { opacity: 0; /* transform: scale(.1, .1) */ }
	5% { opacity: 0; /* transform: scale(1, 1) */ }
	30% { opacity: 1; /* transform: scale(1, 1) */ }
	60% { opacity: 0; /* transform: scale(2, 2) */ }
	90% { opacity: 0; /* transform: scale(2, 2) */ }
	100% { opacity: 0; /* transform: scale(2, 2) */ }
}


/* 鳥 */ 
#btn_301 {
	position: absolute;
	top: 8vw;
	left: 2vw;
	width: 90vw;
	height: auto;
	z-index: 50;
	opacity: 0;
}
.btn_301_1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 54;
}

.bird {
	position: absolute;
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	animation: bird-moving 16s linear infinite;
}

.bird.-type_2 {
	animation-delay: 1s;
}
.bird.-type_2:before, 
.bird.-type_2:after {
	animation-delay: -2s;
}

.bird.-type_3 {
	animation-delay: 3s;
}

@keyframes bird-moving {
	0% {
		top: 8vw;
		left: -2vw;
	}
	25% {
		top: 10vw;
		left: 23vw
	}
	100% {
		top: 6vw;
		left: 101vw;
	}
}

.bird:before, 
.bird:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: white;
	transform: rotate(-30deg);
	transform-origin: right bottom;
}

.bird:before {
	width: 100%;
	height: 1px;
	animation: leftWing 8s linear infinite;
}
.bird:after {
	width: 1px;
	height: 100%;
	animation: rightWing 8s linear infinite;
}

@keyframes leftWing {
  0%   { transform: rotate(-30deg); }
  2%   { transform: rotate(-110deg); }
  4%   { transform: rotate(-30deg); }
  6%   { transform: rotate(-110deg); }
  8%   { transform: rotate(-30deg); }
  10%  { transform: rotate(-110deg); }
  12%  { transform: rotate(-30deg); }
  30%  { transform: rotate(-30deg); }
  42%  { transform: rotate(-35deg); }
  72%  { transform: rotate(-35deg); }
  74%  { transform: rotate(10deg); }
  76%  { transform: rotate(-30deg); }
  78%  { transform: rotate(-110deg); }
  80%  { transform: rotate(-30deg); }
  82%  { transform: rotate(-110deg); }
  84%  { transform: rotate(-30deg); }
  86%  { transform: rotate(-110deg); }
  88%  { transform: rotate(-30deg); }
  90%  { transform: rotate(-110deg); }
  92%  { transform: rotate(-30deg); }
  94%  { transform: rotate(-110deg); }
  96%  { transform: rotate(-30deg); }
  98%  { transform: rotate(-110deg); }
  100% { transform: rotate(-30deg); }
}

@keyframes rightWing {
  0%   { transform: rotate(30deg); }
  2%   { transform: rotate(110deg); }
  4%   { transform: rotate(30deg); }
  6%   { transform: rotate(110deg); }
  8%   { transform: rotate(30deg); }
  10%  { transform: rotate(110deg); }
  12%  { transform: rotate(30deg); }
  30%  { transform: rotate(30deg); }
  42%  { transform: rotate(35deg); }
  72%  { transform: rotate(35deg); }
  74%  { transform: rotate(0deg); }
  76%  { transform: rotate(30deg); }
  78%  { transform: rotate(110deg); }
  80%  { transform: rotate(30deg); }
  82%  { transform: rotate(110deg); }
  84%  { transform: rotate(30deg); }
  86%  { transform: rotate(110deg); }
  88%  { transform: rotate(30deg); }
  90%  { transform: rotate(110deg); }
  92%  { transform: rotate(30deg); }
  94%  { transform: rotate(110deg); }
  96%  { transform: rotate(30deg); }
  98%  { transform: rotate(110deg); }
  100% { transform: rotate(30deg); }
}





/* SPメニュー */

#home-menu-sp {
	width: 100%;
	margin-top: 30px;
}

.home_menu_sp_block {
	width: 90%;
	font-size: 0;
	margin: 0 auto;
	padding: 0;
	font-size: 0;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	inset-inline-start: 0px;
}
.home_menu_sp_block li {
	width: calc((100% - 41px) / 3);
	width: -webkit-calc((100% - 41px) / 3);
	width: -moz-calc((100% - 41px) / 3);
	height: auto; 
	display: inline-block;
	list-style-type: none;
	font-size: 16px; 
	text-align: center; 
	color: #000000;
	vertical-align: middle; 
	padding: 0; 
	margin: 0 20px 30px 0; 
	overflow: hidden;
}
.home_menu_sp_block li:nth-child(3n) {
	margin: 0 0 30px 0;
}

.home_menu_sp_block li img {
	width: 100%;
	height: auto;
}





/* 浜松フードパークとは */

#home-about {
	z-index: 2;
	position: relative;
	max-width: 1050px;
	width: 100%;
	height: auto;
	margin-top: 80px;
	margin-bottom: 60px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}


@media print, screen and (max-width: 1050px) {

	#home-about {
		width: 90%;
	}

}




/* NEWS */

#home-news {
	z-index: 2;
	position: relative;
	max-width: 980px;
	width: 100%;
	height: auto;
	margin-top: 60px;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 60px 0;
}

.news_wrapper {
	width: calc(100% - 120px);
	width: -webkit-calc(100% - 120px);
	width: -moz-calc(100% - 120px);
	padding: 20px 60px 60px 60px;
	background-color: #ffffff;
	border-radius: 30px;
	box-shadow: 3px 3px #d0d0d0;
}

.news_btn {
	width: 180px;
	height: auto;
	margin: 15px auto 35px auto;
}



.news_list_block {
	width: 100%;
	padding: 5px 0;
	border-bottom: 1px solid #9fa0a0;
}
.news_list_block a {
	color: #634100;
}
.news_list_date {
	width: 200px;
	font-size: 20px;
	font-weight: bold;
	color: #634100;
	float: left;
}
.news_list_index {
	width: calc(100% - 221px);
	width: -webkit-calc(100% - 221px);
	width: -moz-calc(100% - 221px);
	margin-left: 20px;
	font-size: 20px;
	font-weight: bold;
	color: #634100;
	float: left;
}


@media print, screen and (max-width: 1050px) {

	#home-news {
		width: 90%;
	}
}

@media print, screen and (max-width: 768px) {

	.news_wrapper {
		width: calc(100% - 40px);
		width: -webkit-calc(100% - 40px);
		width: -moz-calc(100% - 40px);
		padding: 10px 20px 40px 20px;
		background-color: #ffffff;
		border-radius: 20px;
		box-shadow: 3px 3px #d0d0d0;
	}

	.news_btn {
		width: 130px;
		height: auto;
		margin: 15px auto 35px auto;
	}

	.news_list_date {
		width: 100%;
		font-size: 14px;
		font-weight: bold;
		color: #634100;
		float: left;
	}
	.news_list_index {
		width: 100%;
		margin-left: 0px;
		font-size: 18px;
		font-weight: bold;
		color: #634100;
		float: left;
	}

}




/* リンクバナー */

.home_banner_block {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.home_banner_2 {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	display:-webkit-box; 
	display:-moz-box; 
	display:-ms-box; 
	display:-webkit-flexbox; 
	display:-moz-flexbox; 
	display:-ms-flexbox; 
	display:-webkit-flex; 
	display:-moz-flex; 
	display:-ms-flex; 
	display:flex; 
	-webkit-box-lines:multiple; 
	-moz-box-lines:multiple; 
	-webkit-flex-wrap:wrap; 
	-moz-flex-wrap:wrap; 
	-ms-flex-wrap:wrap; 
	flex-wrap:wrap;
}
.home_banner_2 li {
	display: inline-block; 
	width: calc((100% - 60px) / 2);
	width: -webkit-calc((100% - 60px) / 2);
	width: -moz-calc((100% - 60px) / 2);
	height: auto; 
	text-align: center; 
	vertical-align: middle; 
	padding: 0; 
	margin: 15px 15px 15px 15px; 
	overflow: hidden;
}
.home_banner_2 li:nth-child(2n) {
	margin: 15px 0px 15px 15px; 
}

@media print, screen and (max-width: 768px) {

	.home_banner_2 {
		width: 90%;
	}

	.home_banner_2 li {
		width: 100%;
		padding: 0; 
		margin: 15px 0px 15px 0px; 
	}
	.home_banner_2 li:nth-child(2n) {
		margin: 15px 0px 15px 0px; 
	}

}






#home-navigation img,
#home-navigation-sp img {
	width: 100%;
	height: auto;
	display: block;
}

.news_btn img {
	width: 100%;
	height: auto;
	display: block;
}

.about_btn img {
	width: 100%;
	height: auto;
}