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

    /* デザインに応じて変更してください */
    background-color: rgba(168,27,42,0.9);
  }

  .navMenu ul{
    /* デザインに応じて変更してください */
    width: 100%;
    list-style: none;
    padding:0;
    margin:80px 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: 20px 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: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    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: 30px;
    border-bottom: solid 2px #000000;
  }

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

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

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


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

    /* デザインに応じて変更してください */
    top: 20px;
    border-bottom: solid 2px #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: 20px;
    border-bottom: solid 2px #fff;
  }
}