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

  
  html, body {
    overflow-x: hidden;
  }

  .top-wrapper {
    min-height: 100svh;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }


 .header-menu {
    display: none;
  }
 
  header {
      padding:18px 25px;
  }

  .title{
    position:relative;
  }

  .header-sns{
    display:none;
  }

  .header-menu li {
    margin: 20px 0;
  }

  .header-menu.active {
    display: flex;
  }

   .about{
    padding: 60px 20px;
   }

  /* ABOUTカード縦並び */
  .about-card {
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
  }

  /* CAREER幅調整 */
 


  .career{
    padding:0 20px;
    
  }
 
 

  /* HOBBY縦並び */
  .hobby-container {
    flex-direction: column;
    align-items: center;
  }



  .hobbys h2{
    padding: 0 20px;

  }

  .hobby{
    padding:0 20px;
    margin:40px 20px;
    text-align:center;
  }

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

  .hobby img {

    max-width: 320px;
    height: auto;
  }

  /* トップ文字サイズ */
  .title h1 {
    font-size: 36px;
  }



footer{
 text-align: center; 
}



  .header-menu.active {
    display: flex;
  }

}