@media screen and (min-width: 896px) {
  .menu-icon ,.menu-toggle,.phone {
    display: none;
  }
}

@media screen and (max-width: 896px) {

  /* 無料体験ボタン非表示 */
  .header-top .btn,
  .header-top p,
  .main-text,
  .pc,
  .course-img,
  .footer-nav {
    display: none;
  }

  /* フェイスブックと地図サイズ調整 */
  .responsive-iframe {
    width: 340px;
  }

  /* 横積みを縦積みに変更 */
  #About .flex-item, #course .flex-item, 
  #coach .flex-item,.access-container,.header-top,
  .form-group {
    flex-direction: column;
    
  }

    /* 左右に余白 */
    .wrapper,.inr {
      padding: 0 25px;
      box-sizing: border-box;
    } 
  
    .sec-title {
      font-size: 1.6rem;
      margin-top: 50px;
      margin-bottom: 15px;
      padding-bottom: 5px;
    }
    
    .sec-txet {
      margin-bottom: 20px;
    }

    #About .item,
#course .course-txet,
.form-group dt,
.form-group dd {
  width: 100%;
}

.phone-text {
  font-size: 0.9rem;
  margin-bottom: 30px;
}



  /* ヘッダー */
  .site-logo{
    width: 150px;
  }

  /* ハンバーガーメニュー */
  .menu-icon {
    width: 25px;
    margin-right: 10px;
  }
  #header {
    padding: 10px 0;
  }

  .header-top,.header-top ul {
      align-items: flex-start;
      text-align: left;
    }
    .header-nav ul {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 50px;
      right: 0;
      background-color: rgba(255, 255, 255, 0.8);
      width: 100%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
  
    .menu-icon {
      display: block;
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
  
    .menu-toggle:checked + .menu-icon + .header-nav ul {
      display: flex;
    }
  
    .menu-toggle {
      display: none;
    }

    
  
/* メインビジュアル */
#main-visual {
  height: 500px;
  padding-top: 110px;

}

#main-visual h2 {
  font-size: 3rem;
  line-height: 3.7rem;
  padding: 0;
}

#main-visual p {
  font-size: 1.4rem;
  line-height: 1.8rem;
  padding-bottom: 10px;
}


/* アバウト */
.item-title {
  font-size: 1.2rem;
  padding: 0;
}

.item:last-child p {
  margin-bottom: 0;
}

/* コース */
#course .flex-item{
  margin-bottom: 0;
}

/* コーチ */
#coach {
  padding: 30px 20px;
}

.container {
  padding: 30px 30px;
}

#coach .flex-item {
  gap: 20px;
}

.coach-text p:last-child {
  margin-bottom: 0px;
} 


#coach .item {
  margin: 0 auto;
}

/* コンタクト */
#contact {
  margin-bottom: 30px;
}

/* フッター */
footer {
  padding: 20px 0; /* 上下の余白を設定 */
}

footer p {
  margin-top: 0px;
}


}