/*　　　　　横幅　768px　以下（スマホ）用の場合のスタイル　　　　　*/

	.menu{
		background-image:url("../images/top_back_nami.png");
		background-position:bottom;
		margin :0 auto;
	}

	#header {
		width: 100%;
		text-align: center;
		/* background-color:#FFF; */
		margin :0 auto;
	}

	#header img {
		width:100%;
		max-width:600px;
		margin :0 auto;
	}

	.header_menu {
		width:100%;
		text-align:center;
		max-height: 150px;
		margin :0 auto;
	}

	.header_menu p {
		display:inline-block;
		width:23%;
	}

	.header_menu img {
		max-width:100%;
		max-height:100%;
	}

	.fixed {
	    position: fixed;
	    top: 0;
	    width: 100%;
	    z-index: 10000;
	}

/*　　　　　横幅　768px　以上の場合のスタイル　　　　　*/

@media (min-width: 769px){

	#header {
	}
	.fixed {
	    position: fixed;
	    top: 0;
	    width: 600px;
	    z-index: 10000;
	}
	.up{
		margin-top:-250px;
	}

	#header img {
		width:600px;
		margin :0 auto;
	}

	.header_menu img {
		width:150px;
		height:150px;
	}

	.header_menu .fixbar {
	  position: absolute;
	  width: 100%;
	  top: 20px;
	}
	.header_menu.fixed .fixbar {
	  position: fixed;
	  top: 0px;
	}

	.menu{
		margin: 0 auto;
	}

	.header_menu {
		display: table;
		text-align: center;
		width:600px;
		border-collapse: separate;  /* セルの間隔を空ける */
	}


	.header_menu p{
		display: table-cell;
		width: 150px;
		height:150px;
	}
	/* ふわふわさせたいものに fuwafuwaクラスを付与 */
		.fuwafuwa0 {
			list-syle: none;
			vertical-align: middle;
			position:relative;
			transform: rotate(15deg);

			-webkit-animation-name:fuwafuwa_active; /* fuwafuwa_activeっていうアニメーションをしてね！ */
			-webkit-animation-duration:1s;
			-webkit-animation-iteration-count:1;
			/*-webkit-animation-direction:alternate;*/
			-webkit-animation-timing-function:ease;
			
			-moz-animation-name:fuwafuwa_active;
			-moz-animation-duration:1s;
			-moz-animation-iteration-count:1;
			/*-moz-animation-direction:alternate;*/
			-moz-animation-timing-function:ease;

			-ms-animation-name:fuwafuwa_active;
			-ms-animation-duration:1s;
			-ms-animation-iteration-count:1;
			/*-ms-animation-direction:alternate;*/
			-ms-animation-timing-function:ease;

		}

	/* ふわふわさせたいものに fuwafuwaクラスを付与 */
		.fuwafuwa1 {
			list-syle: none;		
			vertical-align: middle;

			-webkit-animation-name:fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
			-webkit-animation-duration:5s;
			-webkit-animation-iteration-count:infinite;
			/*-webkit-animation-direction:alternate;*/
			-webkit-animation-timing-function:ease;
			
			-moz-animation-name:fuwafuwa;
			-moz-animation-duration:5s;
			-moz-animation-iteration-count:infinite;
			/*-moz-animation-direction:alternate;*/
			-moz-animation-timing-function:ease;

			-ms-animation-name:fuwafuwa;
			-ms-animation-duration:5s;
			-ms-animation-iteration-count:infinite;
			/*-ms-animation-direction:alternate;*/
			-ms-animation-timing-function:ease;
		}

		.fuwafuwa2 {
			list-syle: none;
			vertical-align: middle;
			animation-delay: 1s;

			-webkit-animation-name:fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
			-webkit-animation-duration:5s;
			-webkit-animation-iteration-count:infinite;
			/*-webkit-animation-direction:alternate;*/
			-webkit-animation-timing-function:ease;
			
			-moz-animation-name:fuwafuwa;
			-moz-animation-duration:5s;
			-moz-animation-iteration-count:infinite;
			/*-moz-animation-direction:alternate;*/
			-moz-animation-timing-function:ease;

			-ms-animation-name:fuwafuwa;
			-ms-animation-duration:5s;
			-ms-animation-iteration-count:infinite;
			/*-ms-animation-direction:alternate;*/
			-ms-animation-timing-function:ease;
		}

		.fuwafuwa3 {
			list-syle: none;
			vertical-align: middle;
			animation-delay: 0.5s;

			-webkit-animation-name:fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
			-webkit-animation-duration:5s;
			-webkit-animation-iteration-count:infinite;
			/*-webkit-animation-direction:alternate;*/
			-webkit-animation-timing-function:ease;
			
			-moz-animation-name:fuwafuwa;
			-moz-animation-duration:5s;
			-moz-animation-iteration-count:infinite;
			/*-moz-animation-direction:alternate;*/
			-moz-animation-timing-function:ease;

			-ms-animation-name:fuwafuwa;
			-ms-animation-duration:5s;
			-ms-animation-iteration-count:infinite;
			/*-ms-animation-direction:alternate;*/
			-ms-animation-timing-function:ease;
		}

	/* ふわふわさせたいものに fuwafuwaクラスを付与 */
		.fuwafuwa4 {
			list-syle: none;		
			vertical-align: middle;
			animation-delay: 1.5s;

			-webkit-animation-name:fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
			-webkit-animation-duration:5s;
			-webkit-animation-iteration-count:infinite;
			/*-webkit-animation-direction:alternate;*/
			-webkit-animation-timing-function:ease;
			
			-moz-animation-name:fuwafuwa;
			-moz-animation-duration:5s;
			-moz-animation-iteration-count:infinite;
			/*-moz-animation-direction:alternate;*/
			-moz-animation-timing-function:ease;

			-ms-animation-name:fuwafuwa;
			-ms-animation-duration:5s;
			-ms-animation-iteration-count:infinite;
			/*-ms-animation-direction:alternate;*/
			-ms-animation-timing-function:ease;
		}
}/* min-700px */

	/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
		@-webkit-keyframes fuwafuwa {
			0% {-webkit-transform:translate(0, 0px);}
			50% {-webkit-transform:translate(0, 30px);}
			100% {-webkit-transform:translate(0, 0px);}
		}
		@-moz-keyframes fuwafuwa {
			0% {-moz-transform:translate(0, 0px);}
			50% {-moz-transform:translate(0, 30px);}
			100% {-moz-transform:translate(0, 0px);}
		}
		@-ms-keyframes fuwafuwa {
			0% {-ms-transform:translate(0, 0px);}
			50% {-ms-transform:translate(0, 30px);}
			100% {-ms-transform:translate(0, 0px);}
		}

		/* fuwa_activeっていうアニメーションはこんなふうだよ！ */
		@-webkit-keyframes fuwafuwa_active {
			0% {-webkit-transform:translate(0, 0px);}
			50% {-webkit-transform:translate(0, 30px);}
			100% {-webkit-transform:translate(0, 0px);}
		}
		@-moz-keyframes fuwafuwa_active {
			0% {-moz-transform:translate(0, 0px);}
			50% {-moz-transform:translate(0, 30px);}
			100% {-moz-transform:translate(0, 0px);}
		}
		@-ms-keyframes fuwafuwa_active {
			0% {-ms-transform:translate(0, 0px);}
			50% {-ms-transform:translate(0, 30px);}
			100% {-ms-transform:translate(0, 0px);}
		}