@charset "UTF-8";
/**
 * utilities.css
 * 汎用ユーティリティ（最後に読み込む＝上書き用）
 *
 * ⚠ 使いすぎ注意。まずコンポーネント側で解決できないかを検討すること。
 */

/* ---------- 表示 ---------- */
.u-hidden { display: none !important; }

@media (max-width: 767px) {
	.u-pc-only { display: none !important; }
}

@media (min-width: 768px) {
	.u-sp-only { display: none !important; }
}

/* ---------- テキスト ---------- */
.u-center { text-align: center; }
.u-left { text-align: left; }
.u-right { text-align: right; }

.u-nowrap { white-space: nowrap; }

/* 日本語の改行位置を単語単位で整える */
.u-keep-all { word-break: keep-all; overflow-wrap: anywhere; }

.u-primary { color: var(--primary); }
.u-accent { color: var(--accent); }
.u-gray { color: var(--gray); }
.u-white { color: var(--white); }

.u-bold { font-weight: 700; }
.u-sm { font-size: .875rem; }
.u-xs { font-size: .75rem; }
.u-lg { font-size: 1.125rem; }

/* 指定行数で省略 */
.u-clamp-2,
.u-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.u-clamp-2 { -webkit-line-clamp: 2; }
.u-clamp-3 { -webkit-line-clamp: 3; }

/* ---------- 余白 ---------- */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-4 { margin-top: var(--sp-4) !important; }
.u-mt-5 { margin-top: var(--sp-5) !important; }
.u-mt-6 { margin-top: var(--sp-6) !important; }
.u-mt-7 { margin-top: var(--sp-7) !important; }
.u-mt-8 { margin-top: var(--sp-8) !important; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-4 { margin-bottom: var(--sp-4) !important; }
.u-mb-6 { margin-bottom: var(--sp-6) !important; }

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

/* ---------- 配置 ---------- */
.u-flex { display: flex; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-mx-auto { margin-inline: auto; }
.u-w-full { width: 100%; }

/* ---------- 装飾 ---------- */
.u-radius { border-radius: var(--radius); }
.u-radius-lg { border-radius: var(--radius-lg); }
.u-shadow { box-shadow: var(--shadow); }

/* 画像を切り抜いて敷き詰める */
.u-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}