/* responsive.css */

/* タブレット向け (768px以下) */
@media screen and (max-width: 768px) {
    /* ヘッダー */
    .header__nav {
      display: none; /* モバイルメニューは別途JSで制御 */
    }

    .header__logo img {
        width: 130px; /* モバイル時のサイズ */
    }
  
    .header__menu-btn {
      display: block;
    }
  
    /* ヒーローセクション */
    .hero {
      min-height: 500px;
    }
  
    .hero__container {
      flex-direction: column;
      text-align: center;
      padding-top: var(--space-xl);
    }
  
    .hero__content {
      flex: 0 0 100%;
      padding-right: 0;
    }
  
    .hero__message {
      font-size: var(--font-xl);
    }
  
    .hero__image {
      display: none;
    }
  
    /* ビジネスセクション */
    .business-grid {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
  
    .business-item {
      border-right: none;
      border-bottom: 1px solid #eee;
      padding: var(--space-lg);
    }
  
    /* 導入事例セクション */
    .cases-slider {
      padding: 0;
    }
  
    .case-item {
      width: 100%;
    }
  
    /* インフォメーションセクション */
    .info-grid {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
  
    /* ニュースセクション */
    .news-item {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-xs);
    }
  
    .news-date,
    .news-category {
      min-width: auto;
    }
  }
  
  /* スマートフォン向け (480px以下) */
  @media screen and (max-width: 480px) {
    /* 全体の余白調整 */
    .container {
      padding: 0 var(--space-sm);
    }
  
    /* セクション間の余白調整 */
    section {
      padding: var(--space-xl) 0;
    }
  
    /* ヒーローセクション */
    .hero__message {
      font-size: var(--font-lg);
    }
  
    .hero__cta .btn {
      width: 100%;
      text-align: center;
    }
  
    /* メッセージセクション */
    .message__text {
      font-size: var(--font-lg);
    }
  
    /* フッター */
    .footer__main {
      flex-direction: column;
      gap: var(--space-xl);
    }
  
    .footer__nav {
      flex-direction: column;
      gap: var(--space-lg);
    }
  
    .footer__bottom {
      flex-direction: column;
      gap: var(--space-md);
      text-align: center;
    }
  }
  
  /* モバイルメニュー表示時のスタイル */
  .header__nav.is-active {
    display: block;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: var(--color-white);
    padding: var(--space-lg);
  }
  
  .header__nav.is-active .header__nav-list {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .header__nav.is-active .btn-contact {
    width: 100%;
    text-align: center;
    margin-top: var(--space-lg);
  }