@charset "UTF-8";

/* =====================================================
   utilities.css
   Utility Classes for IYOPLAN ADS（2025）
   - Single purpose
   - Immediate effect
   ===================================================== */


/* =====================================================
   1. Display / Visibility
   ===================================================== */

.u-d-none { display: none !important; }
.u-d-block { display: block !important; }
.u-d-inline { display: inline !important; }
.u-d-inline-block { display: inline-block !important; }
.u-d-flex { display: flex !important; }
.u-d-grid { display: grid !important; }


/* =====================================================
   Responsive visibility (does not set display type)
   ===================================================== */

/* default: visible */
.u-only-pc,
.u-only-sp {}

/* SPでは隠す（= PCだけ表示） */
@media (max-width: 768px) {
  .u-only-pc { display: none !important; }
}

/* PCでは隠す（= SPだけ表示） */
@media (min-width: 769px) {
  .u-only-sp { display: none !important; }
}

/* =====================================================
   2. Flex Utilities
   ===================================================== */

.u-flex-row { flex-direction: row !important; }
.u-flex-col { flex-direction: column !important; }

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

.u-items-start { align-items: flex-start !important; }
.u-items-center { align-items: center !important; }
.u-items-end { align-items: flex-end !important; }

.u-justify-start { justify-content: flex-start !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-end { justify-content: flex-end !important; }


/* =====================================================
   3. Text Utilities
   ===================================================== */

.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }

.u-text-bold { font-weight: 700 !important; }
.u-text-normal { font-weight: 400 !important; }

.u-text-muted { color: var(--color-text-muted) !important; }
.u-text-light { color: var(--color-text-light) !important; }
.u-text-white { color: var(--color-white) !important; }


/* =====================================================
   4. Margin Utilities（最低限）
   ===================================================== */

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

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


/* =====================================================
   5. Padding Utilities（最低限）
   ===================================================== */

.u-p-0 { padding: 0 !important; }
.u-p-sm { padding: var(--space-sm) !important; }
.u-p-md { padding: var(--space-md) !important; }
.u-p-lg { padding: var(--space-lg) !important; }


/* =====================================================
   6. Width / Height
   ===================================================== */

.u-w-100 { width: 100% !important; }
.u-h-100 { height: 100% !important; }


/* =====================================================
   7. Position Utilities
   ===================================================== */

.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed { position: fixed !important; }

.u-top-0 { top: 0 !important; }
.u-right-0 { right: 0 !important; }
.u-bottom-0 { bottom: 0 !important; }
.u-left-0 { left: 0 !important; }


/* =====================================================
   8. Overflow / Interaction
   ===================================================== */

.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-visible { overflow: visible !important; }

.u-cursor-pointer { cursor: pointer !important; }
.u-pointer-none { pointer-events: none !important; }


/* =====================================================
   9. Image Utilities
   ===================================================== */

.u-img-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-img-contain img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* =====================================================
   10. Motion Utilities
   ===================================================== */

.u-fadein {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .6s var(--motion-easing),
    transform .6s var(--motion-easing);
}

.u-fadein.is-show {
  opacity: 1;
  transform: translateY(0);
}