@media screen and (min-width:480px) {
	/****メニュー全体****/
	#menu{
		/*配置*/
		position: relative;
		top: -46px;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 100;
	}

	/****メニュー開閉ボタン****/
	#menu .menuWrapper{
		/*デザイン*/
		width: 60px;
		height: 50px;
		background: #A6A6A6;
		/*配置*/
		overflow: hidden;
		position: absolute;
		top: -5px;
		right: 0;
	}

	#menu .menuopen{
		/*デザイン*/
		color: #FFFFFF;
		font-size: 15px;
		text-align: center;
		/*配置*/
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: -5px;
		left: 0;
		pointer-events: auto;
		transform: scale(0.9);
	}

	#menu .menuclose{
		/*デザイン*/
		color: #FFFFFF;
		font-size: 15px;
		text-align: center;
		/*配置*/
		display: none;
		width: 100%;
		height: 100%;
		position: absolute;
		top: -5px;
		left: 0;
		pointer-events: auto;
		transform: scale(0.9);
	}

	#menu .menutext{
		/*デザイン*/
		color: #FFFFFF;
		font-size: 11px;
		text-align: center;
		top: 35px;
		position: relative;
	}

	/****メニュー一覧****/
	#menu ul{
		/*デザイン*/
		background: rgba(255,255,255,1);
		width: 40%;
		/*配置*/
		position: absolute;
		top: 30px;
		right: 0;
		padding: 0;

	}

	#menu li{
		/*アニメーション*/
		-webkit-transition: all 0.3s ease 0s;
		transition: all 0.3s ease 0s;
		/*デザイン*/
		/*padding: 0 10px;*/
		color: rgba(0,0,0,1);
		border-bottom: 0px rgba(255,255,255,1) solid;
		height: 0;
		/*配置*/
		overflow: hidden;
		pointer-events: auto;

	}

	.menu_button {
		text-decoration: none;

		/*display       : inline-block;*/
		/*border-radius : 5%;*/          /* 角丸       */
		font-size     : 13pt;        /* 文字サイズ */
		text-align    : center;      /* 文字位置   */
		cursor        : pointer;     /* カーソル   */
		padding       : 7px 12px;   /* 余白       */
		/*background    : rgba(180, 129, 181, 1);*/     /* 背景色     */
		background    : #ffffff;     /* 背景色     */
		/*color         : rgba(180, 129, 181, 1);*/     /* 文字色     */
		color         : #A6A6A6;     /* 文字色     */
		line-height   : 1em;         /* 1行の高さ  */
		transition    : .3s;         /* なめらか変化 */
		border        : 1px solid #A6A6A6;    /* 枠の指定 */

		width: 100%;
	}

	.menu_button:hover {
		text-decoration: none;

		color         : #ffffff;     /* 背景色     */
		background    : #A6A6A6;     /* 文字色     */
	}


	/****メニューオープン時****/
	#menu:target .menuopen{
		/*配置*/
		display: none;
	}

	#menu:target .menuclose{
		/*配置*/
		display: block;
	}

	#menu:target li{
		/*デザイン*/
		/*padding: 20px;*/
		padding-bottom: 20px;
		height: 13px;
		border-bottom: 1px rgba(255,255,255,1) solid;
		/*margin-top: -20px;*/
	}

}

/*******************/
/*     iphone用    */
/*******************/
@media screen and (max-width:480px) {
/****メニュー全体****/
	#menu{
		/*配置*/
		position: relative;
		top: -46px;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 100;
	}

	/****メニュー開閉ボタン****/
	#menu .menuWrapper{
		/*デザイン*/
		width: 50px;
		height: 47px;
		background:#A6A6A6;
		/*配置*/
		overflow: hidden;
		position: absolute;
		top: -2px;
		right: 1px;
	}

	#menu .menuopen{
		/*デザイン*/
		color: rgba(255,255,255,1);
		font-size: 12px;
		text-align: center;
		/*配置*/
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: -5px;
		left: 0;
		pointer-events: auto;
		transform: scale(0.8);
	}

	#menu .menuclose{
		/*デザイン*/
		color: rgba(255,255,255,1);
		font-size: 12px;
		text-align: center;
		/*配置*/
		display: none;
		width: 100%;
		height: 100%;
		position: absolute;
		top: -5px;
		left: 0;
		pointer-events: auto;
		transform: scale(0.8);
	}

	#menu .menutext{
		/*デザイン*/
		color: rgba(255,255,255,1);
		font-size: 10px;
		text-align: center;
		top: 34px;
		position: relative;
	}

	/****メニュー一覧****/
	#menu ul{
		/*デザイン*/
		background: rgba(255,255,255,1);
		width: 100%;
		/*配置*/
		position: absolute;
		top: 30px;
		right: 0;
		padding: 0;

	}

	#menu li{
		/*アニメーション*/
		-webkit-transition: all 0.3s ease 0s;
		transition: all 0.3s ease 0s;
		/*デザイン*/
		padding: 0 10px;
		color: rgba(0,0,0,1);
		border-bottom: 0px rgba(255,255,255,1) solid;
		height: 0;
		/*配置*/
		overflow: hidden;
		pointer-events: auto;

	}

	.menu_button {
		text-decoration: none;

		/*display       : inline-block;*/
		/*border-radius : 5%;*/          /* 角丸       */
		font-size     : 13pt;        /* 文字サイズ */
		text-align    : left;      /* 文字位置   */
		cursor        : pointer;     /* カーソル   */
		padding       : 7px 12px;   /* 余白       */
		background    : #ffffff;     /* 背景色     */
		color         : #A6A6A6;     /* 文字色     */
		line-height   : 1em;         /* 1行の高さ  */
		transition    : .3s;         /* なめらか変化 */
		/*border        : 1px solid rgba(180, 129, 181, 1);*/    /* 枠の指定 */
		border        : 1px solid rgba(255,190,216, 1);    /* 枠の指定 */

		width: 100%;
	}

	.menu_button:hover {
		text-decoration: none;

		color         : #ffffff;     /* 背景色     */
		background    : #A6A6A6;     /* 文字色     */
	}


	/****メニューオープン時****/
	#menu:target .menuopen{
		/*配置*/
		display: none;
	}

	#menu:target .menuclose{
		/*配置*/
		display: block;
	}

	#menu:target li{
		/*デザイン*/
		/*padding: 20px;*/
		padding-bottom: 20px;
		height: 15px;
		border-bottom: 1px rgba(255,255,255,1) solid;
		/*margin-top: -5px;*/
		padding-left: 0px;
		padding-right: 0px;
	}
}


.menuWrapper {
	z-index: 0;
}

#menuButton {
	overflow: hidden;
	display: block;
	position: relative;
	z-index: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
}

#menuButton span,
#menuButton::before,
#menuButton::after {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left:0;
	right: 0;
	width: 30px;
	height: 3px;
	margin: auto;
	background: #fff;
}

#menuButton span {
	margin: auto;
}
#menuButton::before {
	margin: auto;
}
#menuButton::after {
	margin: auto;
}


#menuButton span {
	overflow: hidden;
	z-index: 1;
	color: #000;
}

#menuButton::before {
	z-index: 2;
	transform: translate(0, -12px);
	content: "";
}

#menuButton::after {
	z-index: 2;
	transform: translate(0, 12px);
	content: "";
}

@keyframes lineTop {
	50% {
		transform: translate(0, 0);
	}
	100% {
		transform: rotate(45deg);
	}
}

@keyframes lineMiddle {
	50%, 100% {
		opacity: 0;
	}
}

@keyframes lineBottom {
	50% {
		transform: translate(0, 0);
	}
	100% {
		transform: rotate(-45deg);
	}
}

#menuButton.menuclose span {
	animation: lineMiddle 250ms step-end forwards;
}
#menuButton.menuclose::before {
	animation: lineTop 250ms forwards;
}
#menuButton.menuclose::after {
	animation: lineBottom 250ms forwards;
}

#menuButton.menuopen span {
	animation: lineMiddle 250ms step-end reverse;
}
#menuButton.menuopen::before {
	animation: lineTop 250ms reverse;
}
#menuButton.menuopen::after {
	animation: lineBottom 250ms reverse;
}