/* responsive.css - Responsive utility classes */

/* ========================================
   Responsive Utilities
   レスポンシブ用ユーティリティクラス
======================================== */

/* Display utilities */
.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-grid {
  display: grid !important;
}

.d-none {
  display: none !important;
}

/* Desktop only */
@media (min-width: 1024px) {
  .d-lg-block {
    display: block !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-none {
    display: none !important;
  }
}

/* Tablet only */
@media (min-width: 768px) and (max-width: 1023px) {
  .d-md-block {
    display: block !important;
  }

  .d-md-flex {
    display: flex !important;
  }

  .d-md-none {
    display: none !important;
  }
}

/* Mobile only */
@media (max-width: 767px) {
  .d-sm-block {
    display: block !important;
  }

  .d-sm-flex {
    display: flex !important;
  }

  .d-sm-none {
    display: none !important;
  }
}

/* Text alignment */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

@media (max-width: 767px) {
  .text-sm-center {
    text-align: center !important;
  }

  .text-sm-left {
    text-align: left !important;
  }
}

/* Flex utilities */
.flex-column {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.align-center {
  align-items: center !important;
}

.gap-sm {
  gap: var(--space-sm) !important;
}

.gap-md {
  gap: var(--space-md) !important;
}

.gap-lg {
  gap: var(--space-lg) !important;
}

@media (max-width: 767px) {
  .flex-sm-column {
    flex-direction: column !important;
  }

  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
}

/* Spacing utilities (margin/padding) */
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt-sm {
  margin-top: var(--space-sm) !important;
}

.mt-md {
  margin-top: var(--space-md) !important;
}

.mt-lg {
  margin-top: var(--space-lg) !important;
}

.mb-sm {
  margin-bottom: var(--space-sm) !important;
}

.mb-md {
  margin-bottom: var(--space-md) !important;
}

.mb-lg {
  margin-bottom: var(--space-lg) !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pt-sm {
  padding-top: var(--space-sm) !important;
}

.pt-md {
  padding-top: var(--space-md) !important;
}

.pt-lg {
  padding-top: var(--space-lg) !important;
}

.pb-sm {
  padding-bottom: var(--space-sm) !important;
}

.pb-md {
  padding-bottom: var(--space-md) !important;
}

.pb-lg {
  padding-bottom: var(--space-lg) !important;
}

/* Width utilities */
.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

@media (max-width: 767px) {
  .w-sm-100 {
    width: 100% !important;
  }
}

/* Container responsive padding */
.container {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

@media (max-width: 767px) {
  .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* Hide/Show based on screen size */
.mobile-only {
  display: none !important;
}

@media (max-width: 767px) {
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .desktop-only {
    display: block !important;
  }
}