/* 
  LP Utility Classes
  ------------------
  コーディングを効率化するための汎用クラス集
*/

/* --- Layout --- */
.u-container {
  max-width: var(--container-width, 1100px);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.u-flex { display: flex; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-flex-wrap { flex-wrap: wrap; }

.u-grid { display: grid; }
.u-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.u-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.u-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.u-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.u-gap-10 { gap: 10px; }
.u-gap-20 { gap: 20px; }
.u-gap-30 { gap: 30px; }
.u-gap-40 { gap: 40px; }

@media (max-width: 992px) {
  .u-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .u-grid-cols-2, .u-grid-cols-3, .u-grid-cols-4 { grid-template-columns: 1fr; }
}

/* --- Spacing (Margin) --- */
.u-mt-0  { margin-top: 0 !important; }
.u-mt-10 { margin-top: 10px !important; }
.u-mt-20 { margin-top: 20px !important; }
.u-mt-40 { margin-top: 40px !important; }
.u-mt-60 { margin-top: 60px !important; }
.u-mt-80 { margin-top: 80px !important; }

.u-mb-0  { margin-bottom: 0 !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-mb-40 { margin-bottom: 40px !important; }
.u-mb-60 { margin-bottom: 60px !important; }
.u-mb-80 { margin-bottom: 80px !important; }

/* --- Spacing (Padding) --- */
.u-pt-40 { padding-top: 40px !important; }
.u-pt-80 { padding-top: 80px !important; }
.u-pb-40 { padding-bottom: 40px !important; }
.u-pb-80 { padding-bottom: 80px !important; }

/* --- Typography --- */
.u-text-center { text-align: center !important; }
.u-text-left   { text-align: left !important; }
.u-text-right  { text-align: right !important; }
.u-bold        { font-weight: bold !important; }
.u-small       { font-size: 0.8rem !important; }
.u-large       { font-size: 1.25rem !important; }

/* --- Display --- */
.u-pc-only { display: block !important; }
.u-sp-only { display: none !important; }
@media (max-width: 768px) {
  .u-pc-only { display: none !important; }
  .u-sp-only { display: block !important; }
}

/* --- Decoration --- */
.u-bg-gray { background-color: #f7f7f7 !important; }
.u-full-img img { width: 100%; height: auto; display: block; }