@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: 55px;
		/*background: rgba(200,200,200,1); */
		background: #A6A6A6;
		/*background: rgba(239,86,255,1);*/
		/*配置*/
		color:#ffffff;
		overflow: hidden;
		position: absolute;
		top: -10px;
		right: 0;
/*		display: none;*/
	}

	#menu .menuopen{
		/*デザイン*/
		color: #A6A6A6;
		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: #A6A6A6;
		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(224,181,224,1); */
		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: #ffffff;
    /* color: rgba(180, 129, 181, 1); */
    color: #A6A6A6;
    line-height: 1em;
    transition: .3s;
    /* border: 1px solid rgba(180, 129, 181, 1); */
    border: 1px solid #A6A6A6;
    width: 100%;

}
	}

	.menu_button:hover {
		text-decoration: none;
		border:#FFFFFF;
		color         : #ffffff;     /* 背景色　白色 */
		/*background    : rgba(180, 129, 181, 1);*/     /* 文字色     */
		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: -50px;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 100;
	}

	/****メニュー開閉ボタン****/
	#menu .menuWrapper{
		/*デザイン*/
		width: 50px;
		height: 55px;
		/*background: rgba(200,200,200,1); */
		background: #A6A6A6;
		color:#FFFFFF;
		/* background: rgba(239,86,255,1); */
		/*配置*/
		overflow: hidden;
		position: absolute;
		top: -5px;
		right: 1px;
/*		display: none;*/
	}

	#menu .menuopen{
		/*デザイン*/
		color: #A6A6A6;
		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: #A6A6A6;
		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: #FFFFFF;
		font-size: 10px;
		text-align: center;
		top: 34px;
		position: relative;
	}

	/****メニュー一覧****/
	#menu ul{
		/*デザイン*/
		/*background: rgba(224,181,224,1);*/
		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         : rgba(180, 129, 181, 1);*/     /* 文字色     */
		color         : #A6A6A6;     /* 文字色 黒色    */
		line-height   : 1em;         /* 1行の高さ  */
		transition    : .3s;         /* なめらか変化 */
		/*border        : 1px solid rgba(180, 129, 181, 1);*/    /* 枠の指定 */
		border        : 1px solid #A6A6A6;    /* 枠の指定 */

		width: 100%;
	}

	.menu_button:hover {
		text-decoration: none;

		color         : #ffffff;     /* 文字色 白    */
		/*background    : rgba(180, 129, 181, 1);*/     /* 文字色     */
		background    : #ffffff;     /* 背景　濃いピンク     */
		border:#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;
}