/* リセットCSS */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  border: 0;
  background: transparent;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

button:hover {
  cursor: pointer;
}

/**************** 以下、ハンバーガーボタンのスタイリング ****************/
.btn {
  /* ボタンの配置位置  */
  position: fixed;
  top: 16px;
  right: 16px;
  /* ボタンの大きさ  */
  width: 58px;
  height: 48px;
  /* バーガーの線をボタン範囲の中心に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 最前面に */
  z-index: 10;
}

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

/***** 上下のバーガー線 *****/
.btn-line::before,
.btn-line::after {
  content: "";
  /* 基準線と同じ大きさと色 */
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333;
  transition: .2s;
}


.btn-line::before {
  /* 上の線の位置 */
  transform: translateY(-16px);
}


.btn-line::after {
  /* 下の線の位置 */
  transform: translateY(16px);
}

/***** メニューオープン時 *****/
.btn-line.open {
  /* 真ん中の線を透明に */
  background-color: transparent;
}

.btn-line.open::before,
.btn-line.open::after {
  content: "";
  transition: .2s;
}

.btn-line.open::before {
  /* 上の線を傾ける */
  transform: rotate(0);
}

.btn-line.open::after {
  /* 上の線を傾ける */
  transform: rotate(0);
}

/* ボタンフォーカス時の装飾 */
.btn:focus .btn-line ,
.btn:focus .btn-line::before ,
.btn:focus .btn-line::after {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .7);
}

.btn:focus .btn-line.open {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
    
.btn:focus .btn-line.open::before ,
.btn:focus .btn-line.open::after {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .7);
}

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

/**************** 以下、メニューのスタイリング ****************/
.menu {
  position: fixed;
  /* メニューの位置マイナス指定で画面外に */
  transform : translateX(130%);
  width: 70%;
  height: 100vh;
  /* メニューを縦に */
  display: flex;
  flex-direction: column;
  color: #efefef;
  background-color: rgba(167, 148, 58, 0.7);
  transition: transform .3s;
}

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

.menu-list:hover {
  color: #333;
  background-color: rgba(255, 255, 255, 0.5);
  transition: .3s;
  cursor: pointer;
}

/***** メニューオープン時位置0にして画面内に *****/
.menu.open {
  transform: translateX(30%);
}

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

  .menu {
    position: fixed;
    transform : translateX(0);
    width: 100%;
    height: 100px;
    /* メニューを横に */
    display: flex;
    flex-direction: row;
  }
}
/**************** ここまで、メニューのスタイリング ****************/