/* ==========================================================================
   Main Stylesheet - STELLA HOLDINGS
   ========================================================================== */

/* Foundation */
@import url('variables.css?v=20260228');
@import url('reset.css?v=20260228');

/* Layout */
@import url('layout.css?v=20260228');

/* Components */
@import url('components.css?v=20260228');

/* Sections */
@import url('sections.css?v=20260228');

/* Animations */
@import url('animations.css?v=20260228');

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Montserrat:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Base Styles
   ========================================================================== */

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family-ja);
  color: var(--color-text);
  background-color: var(--color-white);
  overflow-x: hidden;
}

/* Section spacing */
section {
  padding: 0;
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Text alignment */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

/* Font family */
.u-font-en { font-family: var(--font-family-en); }
.u-font-ja { font-family: var(--font-family-ja); }

/* Font weight */
.u-font-normal { font-weight: var(--font-weight-normal); }
.u-font-medium { font-weight: var(--font-weight-medium); }
.u-font-bold { font-weight: var(--font-weight-bold); }
.u-font-black { font-weight: var(--font-weight-black); }

/* Colors */
.u-color-primary { color: var(--color-primary); }
.u-color-secondary { color: var(--color-secondary); }
.u-color-text { color: var(--color-text); }
.u-color-text-light { color: var(--color-text-light); }
.u-color-white { color: var(--color-white); }

/* Background colors */
.u-bg-primary { background-color: var(--color-primary); }
.u-bg-secondary { background-color: var(--color-secondary); }
.u-bg-cream { background-color: var(--color-bg-cream); }
.u-bg-light { background-color: var(--color-bg-light); }
.u-bg-white { background-color: var(--color-white); }

/* Spacing */
.u-mt-0 { margin-top: 0; }
.u-mt-sm { margin-top: var(--spacing-sm); }
.u-mt-md { margin-top: var(--spacing-md); }
.u-mt-lg { margin-top: var(--spacing-lg); }
.u-mt-xl { margin-top: var(--spacing-xl); }
.u-mt-2xl { margin-top: var(--spacing-2xl); }

.u-mb-0 { margin-bottom: 0; }
.u-mb-sm { margin-bottom: var(--spacing-sm); }
.u-mb-md { margin-bottom: var(--spacing-md); }
.u-mb-lg { margin-bottom: var(--spacing-lg); }
.u-mb-xl { margin-bottom: var(--spacing-xl); }
.u-mb-2xl { margin-bottom: var(--spacing-2xl); }

/* Display */
.u-hidden { display: none; }
.u-block { display: block; }
.u-flex { display: flex; }
.u-grid { display: grid; }

/* Responsive visibility */
@media (max-width: 767px) {
  .u-hidden-sp { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .u-hidden-tablet { display: none !important; }
}

@media (min-width: 1024px) {
  .u-hidden-pc { display: none !important; }
}