

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
}
.btn-line{
	width:40px;
	height:2px;
	background:#238f3b;
	position:absolute;
}
span:nth-child(1){
	transition:all 0.5s;
	top:0;
}
span:nth-child(3){
	transition:all 0.5s;
	top:24px;
}
span:nth-child(2){
	top:12px;
}

.open span:nth-child(1){ transform:translateY(14px) rotate(45deg);}
.open span:nth-child(3){ transform:translateY(-14px) rotate(-45deg);}
.open span:nth-child(2){ opacity:0;}

button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	vertical-align: middle;
	text-align: inherit;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.menu {
  width: 70%;
  height: 100vh;
  margin-left: auto;
  /* メニューを縦に */
  display: flex;
  flex-direction: column;
  color: #5188b1;
  background:#fff;
}

.menu-list {
  width: 100%;
  height: 75px;
  /* メニューテキスト位置をリスト内中心に */
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  /* メニューの位置マイナス指定で画面外に */
  position: fixed;
  right: -70%;
  width: 70%;
  height: 100vh;
  /* メニューを縦に */
  display: flex;
  flex-direction: column;
  color: #efefef;
}

.js-btn {
  /* ボタンの配置位置  */
  position: fixed;
  top:8px;
  right: 16px;
  /* ボタンの大きさ  */
  width: 50px;
  height: 50px;
  /* 最前面に */
  z-index: 999;

  background-color: #fff; /* わかりやすいように */
}

/***** 真ん中のバーガー線 *****/
.btn-line {
	display: block;
	position: relative;  /* バーガー線の位置基準として設定 */
	width: 100%;  /* 線の長さと高さ */
	height: 2px;
	background-color: #238f3b;  /* バーガー線の色 */
	transition: .2s;
}

/****** 上下のバーガー線 *****/


/**************** ここまで、ハンバーガーボタンのスタイリング ****************/

/**************** 以下、メニューのスタイリング ****************/
.menu {
	/* メニューを縦に */
	display: flex;
	flex-direction: column;
	position: fixed;
	/* メニューの位置マイナス指定で画面外に */
	right: -70%;
	width: 70%;
	height: 100vh;
	margin-top:79px;
	transition:all 1s;
	z-index:70;
}

.menu-list {
	/* メニューテキスト位置をリスト内中心に */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height:75px;
	text-decoration:none;
}

.menu-list:hover {
	color: #333;
	cursor: pointer;
	transition: .3s;
}

/***** メニューオープン時位置0にして画面内に *****/
.menu.open {
	right: 0;
	background:#fff;
	color:#5188b1;
	margin-top:79px;
	position:fixed;
}

/* 601px以上はハンバーガーボタン非表示、ヘッダー固定 */
@media screen and (min-width: 601px) {
	.js-btn {
		display: none;
	}

	#navi{
		display:none;
}
	.js-btn, a.js-btn, button.js-btn{
		display:none;
}

}
/**************** ここまで、メニューのスタイリング ****************/