/* メニューのデザイン設定 ----------------------*/
.navMenu{
  /* 必須プロパティ */
  position: fixed;
  z-index: 200;
  top: 0;
  right: -320px;
  bottom: 0;
  transition: all 0.6s;
  height: 100vh;
  width: 300px;
  overflow-y: auto ;

  /* デザインに応じて変更してください */
  background-color: #c70b00;
  background: linear-gradient(to bottom, rgba(200,36,36,1), rgba(100,36,36,0.5));
}

.navMenu ul{
  /* デザインに応じて変更してください */
  width: 100%;
  list-style: none;
  padding:0;
  margin:10vw 0;
  border-top: 1px solid #fff;
}

.navMenu ul li{
  /* デザインに応じて変更してください */
  text-align: center;
  border-bottom: 1px solid #fff;
}

.navMenu ul li a{
  /* デザインに応じて変更してください */
  display: block;
  width: 100%;
  padding: 2vw 0;
  color: #fff;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

/* toggleをクリックするとactiveクラスが追加され、このデザインが適用される */
.navMenu.active{
  /* 必須プロパティ */
  right: 0;
}


.bgMenu{
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  z-index: 100;
  cursor: pointer;
}

.bgMenu.active{
  opacity: 0.8;
  visibility: visible;
}

/* ハンバーガーメニュークリック前のデザイン ----*/
.toggle{
  /* 必須プロパティ */
  display: block;
  position: absolute;
  z-index:300;

  /* デザインに応じて変更してください */
  right: 4vw;
  top: 3vw;
  width: 4vw;
  height: 4vw;
  cursor: pointer;
}

.toggle span{
  /* 必須プロパティ */
  display: block;
  position: absolute;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;

  /* デザインに応じて変更してください */
  width: 4vw;
  border-bottom: solid 0.3vw #c70b00;
}

.toggle span:nth-child(1){
  /* デザインに応じて変更してください */
  top: 1vw;
}

.toggle span:nth-child(2){
  /* デザインに応じて変更してください */
  top: 2vw;
}

.toggle span:nth-child(3){
  /* デザインに応じて変更してください */
  top: 3vw;
}

/* ハンバーガーメニュークリック後のデザイン ----*/
.toggle.active span:nth-child(1){
  /* 必須プロパティ */
  -webkit-transform: rotate(-30deg);
  -mod-transform: rotate(-30deg);
  transform: rotate(-30deg);

  /* デザインに応じて変更してください */
  top: 2vw;
  border-bottom: solid 0.3vw #fff;
}

.toggle.active span:nth-child(2),
.toggle.active span:nth-child(3){
  /* 必須プロパティ */
  -webkit-transform: rotate(30deg);
  -mod-transform: rotate(30deg);
  transform: rotate(30deg);

  /* デザインに応じて変更してください */
  top: 2vw;
  border-bottom: solid 0.3vw #fff;
}


/* ブレイクポイント毎のデザイン */
@media (max-width:768px) {
  /* メニューのデザイン設定 ----------------------*/
  .navMenu{
    /* 必須プロパティ */
    position: fixed;
    z-index: 200;
    top: 0;
    right: -320px;
    bottom: 0;
    transition: all 0.6s;
    height: 100vh;
  width: 240px;
    overflow-y: auto ;

    /* デザインに応じて変更してください */
    background-color: #c70b00;
    background: linear-gradient(to bottom, rgba(200,36,36,1), rgba(100,36,36,0.5));
  }

  .navMenu ul{
    /* デザインに応じて変更してください */
    width: 100%;
    list-style: none;
    padding:0;
  margin:12vw 0;
    border-top: 1px solid #fff;
  }

  .navMenu ul li{
    /* デザインに応じて変更してください */
    text-align: center;
    border-bottom: 1px solid #fff;
  }

  .navMenu ul li a{
    /* デザインに応じて変更してください */
    display: block;
    width: 100%;
  padding: 6vw 0;
    color: #fff;
  }

  /* toggleをクリックするとactiveクラスが追加され、このデザインが適用される */
  .navMenu.active{
    /* 必須プロパティ */
    right: 0;
  }


  .bgMenu{
    position: fixed;
    top:0;
    left:0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    z-index: 100;
    cursor: pointer;
  }

  .bgMenu.active{
    opacity: 0.8;
    visibility: visible;
  }

  /* ハンバーガーメニュークリック前のデザイン ----*/
  .toggle{
    /* 必須プロパティ */
    display: block;
    position: absolute;
    z-index:300;
    right: 6vw;
    top: 3vw;
    width: 6vw;
    height: 6vw;
    cursor: pointer;
  }

  .toggle span{
    /* 必須プロパティ */
    display: block;
    position: absolute;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    width: 6vw;
    border-bottom: solid 0.6vw #c70b00;
  }

  .toggle span:nth-child(1){
    top: 1vw;
  }

  .toggle span:nth-child(2){
    /* デザインに応じて変更してください */
    top: 3vw;
  }

  .toggle span:nth-child(3){
    /* デザインに応じて変更してください */
    top: 5vw;
  }

  /* ハンバーガーメニュークリック後のデザイン ----*/
  .toggle.active span:nth-child(1){
    /* 必須プロパティ */
    -webkit-transform: rotate(-45deg);
    -mod-transform: rotate(-45deg);
    transform: rotate(-45deg);

    /* デザインに応じて変更してください */
    top: 3vw;
    border-bottom: solid 0.6vw #fff;
  }

  .toggle.active span:nth-child(2),
  .toggle.active span:nth-child(3){
    /* 必須プロパティ */
    -webkit-transform: rotate(45deg);
    -mod-transform: rotate(45deg);
    transform: rotate(45deg);

    /* デザインに応じて変更してください */
    top: 3vw;
    border-bottom: solid 0.6vw #fff;
  }
}