/* タブレット向けレイアウト */
@media all and (max-width: 1000px) {
    .lesson {
      width: 50%;
      margin-bottom: 50px;
    }
  
    footer {
      text-align: center;
    }
  
    .top-wrapper h1 {
      font-size: 32px;
    }
  
    .heading h2 {
      font-size: 20px;
    }
  }

  .menu {
    background-color: rgb(83, 83, 220);
  }

  .menu a{
    display:none;
  }
  
  /* スマホ向けレイアウト */
  @media all and (max-width: 700px) {
    .lesson {
      width: 100%;
    }

    .heading h2 {
      font-size: 20px;
    }

    .btn {
      width: 100%;
    }
  
    .facebook {
      margin-bottom: 10px;
    }
    
    .top-wrapper {
      text-align: left;
    }
  
    /* header-rightクラスのdisplayをnoneに指定してください */
    .header-right{
      display:none;
    }

    .submenu{
      margin-top: 0px;
      display:block;
    }
    
    /* menu-iconクラスのdisplayをblockに指定してください  */
    .menu a{
      display:block;
    }

    .menu:hover .subMenu {
      display: block;
    }

    .top-wrapper {
        background-position: 50%;
    }
    
    .top-wrapper h1 {
      font-size: 24px;
    }
  
    .top-wrapper p {
      font-size: 14px;
    }
  }