@media (max-width: 1024px) {
  nav ul li a {
    font-size: 20px;
  }
  
  .checkbtn {
    display: block;
  }

  nav ul {
    position: fixed;
    position: absolute;
    width: 100%;
    height: 90vh;
    background: white;
    top: 60px;
    left: -100%;
    text-align: center;
    z-index: 1;
    transition: all .5s;
  }

  nav ul li {
    display: block;
    border: none;
    padding: 20px 0;
    -webkit-transform: skewX(0deg);
    -moz-transform: skewX(0deg);
    transform: skewX(0deg);
  }

  nav ul li a {
    transform: skewX(0deg);
  }
  
  #check:checked ~ ul {
    left: 0;
  }

  h1 {
    padding: 0;
    text-align: center;
  }

  /* ---about--- */
  .about {
    height: 100%;
  }

  .about-main {
    margin: 50px 0;  
  }

  .tabbed {
    display: none;
  }

  .navigation-manual {
    margin-top: 200px;
  }

  .navigation-auto {
    margin-top: 700px;
  }

  /* ---about--- */

  /* ---effect--- */
  .effect-main {
    display: block;
    text-align: center;
    margin: 0;
  }

  .effect-main .fas.down {
    display: block;
    padding: 20px 0;
  }

  .effect-main .fas.right {
    display: none;
  }
  /* ---effect--- */

  /* ---lesson--- */
  .lesson-main {
    display: block;
  }

  .lesson-main img {
    width: 300px;
    height: 200px;
  }
  
  .lesson-main .lesson-box {
    width: 100%;
    height: 500px;
  }

  /* ---lesson--- */

  /* ---info--- */
  .price,.date {
    margin: 0;
    text-align: center;
  }
  /* ---info--- */

  /* ---staff--- */
  .staff-main .s {
    display: block;
    text-align: center;
    width: 100%;
    margin: 10px auto;
  }

  .staff-main .s img {
    margin: 20px auto;
  }

  .staff-main .s .s-main {
    text-align: center;
  }

  .staff-main .s .s-main li {
    text-align: left;
  }
  /* ---staff--- */

  .logo {
    top: 7%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}

@media (max-width: 768px) {

  h1 {
    font-size: 30px;
    padding: 0;
    text-align: center;
  }

  .box {
    padding: 10px;
  }

  /* ---about--- */

  .about-main h2 {
    font-size: 25px;
  }

  .about-main p {
    font-size: 15px;
  }
  /* ---about--- */

  /* ---effect--- */
  .effect-main {
    margin: 0;
  }

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

  .effect-main span {
    font-size: 18px;
  }

  .effect-main h3 {
    font-size: 18px;
  }

  .effect-main h4 {
    font-size: 18px;
  }

  .effect-main .fas {
    font-size: 80px;
  }
  /* ---effect--- */

  /* ---lesson--- */

  .lesson-main {
    display: block;
    text-align: center;
  }

  .lesson-main img {
    width: 100%;
    height: 150px;
    margin: 10px 0;
  }
  
  .lesson-main .lesson-box {
    width: 100%;
    height: 100%;
  }

  .lesson-main .lesson-box h2 {
    font-size: 20px;
  }

  .lesson-main .lesson-box h3 {
    font-size: 15px;
  }

  .lesson-main .lesson-box p {
    font-size: 15px;
  }

  .lesson h4 {
    font-size: 20px;
    text-align: center;
  }

  /* ---lesson--- */

  /* ---info--- */
  .price,.date {
    display: block;
  }

  .price i, .date i {
    padding: 0 ;
    font-size: 40px;
  }

  .price h3, .date h3{
    padding: 0 0 10px 0;
    font-size: 20px;
  }

  .price h4, .date h4 {
    padding: 0;
    margin: 0;
    padding-bottom: 10px;
    font-size: 20px;
  }

  .price p, .date p {
    padding: 0 0 10px 0;
    font-size: 15px;
  }

  .price-left, .date-left {
    padding: 0;
  }

  .price-right, .date-right {
    padding: 0;
  }

  .info-txt {
    font-size: 15px;
  }

  /* ---info--- */

  /* ---staff--- */

  .staff-main .s {
    display: block;
    margin: 50px auto;
  }

  .staff-main .s .s-main {
    width: 100%;
  }

  .staff-main .s .s-main p {
    font-size: 15px;
  }

  .staff-main .s .s-main span {
    font-size: 15px;
    width: 50px;
  }

  .staff-main .s .s-main ul {
    padding-left: 0;
    width: 100%;
  }

  .staff-main .s .s-main ul li {
    font-size: 15px;
  }

  /* ---staff--- */

  /* ---contact--- */

  .contact {
    height: 100%;
  }

  .contact-main {
    margin: 0;
    display: block;
  }

  .contact1 h2 {
    font-size: 25px;
  } 



  /* ---contact--- */

  .logo {
    font-size: 15px;
  }

  .to-top {
    width: 50px;
    height: 50px;
  }

  .sns {
    width: 50px;
    height: 50px;
  }

  .sns .fab {
    font-size: 30px;
  }

}