/* ==========================================================================
   WiT design works - レスポンシブスタイルシート
   モバイルデバイスからデスクトップまでの様々な画面サイズに対応
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. 大画面デスクトップ (1200px以上)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }

  .hero-title {
    font-size: 2.75rem;
  }

  .section-title {
    font-size: 2.25rem;
  }
}

/* -----------------------------------------------------------------------------
   2. 標準デスクトップ (992px - 1199px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 992px) {
  .container {
    max-width: 960px;
  }

  .hero-content {
    gap: var(--space-xl);
  }

  .branding-cards,
  .case-cards,
  .vision-cards {
    gap: var(--space-lg);
  }
}

/* -----------------------------------------------------------------------------
   3. タブレット (768px - 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) and (min-width: 768px) {
  .container {
    max-width: 720px;
  }

  .hero-content,
  .about-content,
  .mission-content,
  .profile-content {
    flex-direction: column;
  }

  .hero-image,
  .about-image,
  .mission-image,
  .profile-image {
    max-width: 500px;
    margin: 0 auto;
  }

  .branding-cards,
  .case-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .vision-cards {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  .portfolio-case {
    flex-direction: column;
  }

  .case-media {
    display: flex;
    justify-content: center;
    padding: var(--space-lg);
  }

  .case-media img {
    max-width: 300px;
  }
}

/* -----------------------------------------------------------------------------
   4. モバイル (767px以下)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .header-inner {
    height: 70px;
  }

  .logo {
    font-size: 1.25rem;
  }

  .nav-desktop,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-menu {
    top: 70px;
  }

  .hero {
    padding: var(--space-xl) 0;
  }

  .hero-content,
  .about-content,
  .mission-content,
  .profile-content {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .hero-title {
    font-size: 1.75rem;
    text-align: center;
  }

  .hero-subtitle {
    font-size: 1rem;
    text-align: center;
  }

  .hero-buttons {
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
  }

  .hero-image,
  .about-image,
  .mission-image,
  .profile-image {
    max-width: 100%;
  }

  .section-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-xl);
  }

  .section-title::after {
    width: 3rem;
  }

  .branding-cards,
  .case-cards,
  .vision-cards,
  .contact-methods {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .portfolio-case {
    flex-direction: column;
  }

  .case-media {
    padding: var(--space-md);
  }

  .case-details {
    padding: var(--space-md);
  }

  .case-client {
    font-size: 1.25rem;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .info-list {
    grid-template-columns: 1fr;
  }

  .contact-form-container {
    padding: var(--space-md);
  }

  .form-title {
    font-size: 1.25rem;
  }

  .page-hero {
    padding: var(--space-lg) 0;
  }

  .page-title {
    font-size: 1.75rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }
}

/* -----------------------------------------------------------------------------
   5. 小型モバイル (480px以下)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-title {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.25rem;
  }

  .btn {
    width: 100%;
  }

  .problems-list {
    gap: var(--space-sm);
  }

  .problem-item {
    padding: var(--space-sm);
  }

  .problems-conclusion {
    font-size: 1rem;
  }

  .branding-intro,
  .contact-intro {
    font-size: 0.9rem;
  }

  .highlight {
    font-size: 1rem;
  }

  .case-client {
    font-size: 1.1rem;
  }

  .case-section h3 {
    font-size: 0.9rem;
  }

  .profile-name {
    font-size: 1.25rem;
  }

  .profile-heading {
    font-size: 1rem;
  }
}