@charset "utf-8";

/* レスポンシブデザイン */

@media (max-width: 768px) {
  .div-item-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 15px;
  }
    .banner-container {
        margin: 0 15px;
    }

    nav.side-menu {
        width: 280px;
        left: -280px;
    }
    
    .icon-btn, .hamburger {
        width: 40px;
        height: 40px;
    }
    
    .icon {
        font-size: 18px;
    }

    h2 {
    font-size: 18px;
    color: #333;
    margin: 40px auto 20px;
    text-align: center;
}

}
@media (max-width: 480px) {
  .div-item-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
  }

    .banner-container {
        margin: 0 15px;
    }
    
    nav.side-menu {
        width: 100%;
        left: -100%;
    }

    .icon-btn, .hamburger {
        width: 40px;
        height: 40px;
    }

  .footer-nav {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .footer-nav li::after {
    content: none;
  }
}