/* ============================================================
   solutions.css — Solutions / Featured(Gym App) / Other（front-page 専用）
   方針: Gym App を圧倒的主役に（最大・最も目立つ・最も余白）。
   Featured 背景 = Brand Tint。Other は面積を約半分に抑える。
   ============================================================ */

#solutions { scroll-margin-top: 80px; }
.da-solutions { background: var(--da-bg); }

/* ---------------- Featured Solution（Gym App / Brand Tint） ---------------- */
.da-featured {
	background: var(--da-primary-50);          /* Brand Tint */
	border: 1px solid var(--da-primary-100);
	border-radius: var(--da-radius-2xl);
	padding: var(--da-space-40) var(--da-space-24);
	margin-top: var(--da-space-16);
}
.da-featured__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--da-space-40);
	align-items: center;
}
.da-featured__title {
	margin: var(--da-space-16) 0 var(--da-space-16);
	font-size: 26px;
	font-weight: var(--da-fw-bold);
	line-height: var(--da-lh-tight);
	letter-spacing: var(--da-ls-heading);
	color: var(--da-text-strong);
}
.da-featured__desc {
	margin: 0;
	font-size: var(--da-fs-body);
	line-height: var(--da-lh-body);
	color: var(--da-text);
}
.da-featured__features {
	list-style: none;
	margin: var(--da-space-32) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--da-space-12) var(--da-space-24);
}
.da-feature-item {
	display: flex;
	align-items: center;
	gap: var(--da-space-8);
	font-size: 15px;
	font-weight: var(--da-fw-medium);
	color: var(--da-text-strong);
}
.da-feature-item__icon { width: 18px; height: 18px; flex: none; color: var(--da-primary-600); }
.da-featured__cta { margin-top: var(--da-space-32); }

/* Featured：実画面ショーケース（オーナー用ダッシュボード＝主役 ＋ 予約枠を重ねる） */
.da-featured__visual { position: relative; display: flex; justify-content: center; }
.da-solshot { position: relative; width: 100%; max-width: 320px; }

/* タブレット（オーナー用ダッシュボード）＝主役。わずかに傾け、浮遊感のある影 */
.da-solshot__tablet {
	position: relative; z-index: 1;
	display: block; width: 100%; height: auto;
	border-radius: 14px;
	border: 1px solid var(--da-border);
	box-shadow: 0 40px 70px -28px rgba(15, 23, 42, .38), 0 12px 26px -16px rgba(15, 23, 42, .22);
	transform: rotate(-1.4deg);
}

/* 予約枠カレンダー（別画面）＝重ねて配置。逆方向に傾ける */
.da-solshot__phone {
	position: absolute; z-index: 2;
	right: -8%; bottom: -6%;
	display: block; width: 40%; height: auto;
	border-radius: 12px;
	border: 1px solid var(--da-border);
	box-shadow: 0 26px 48px -20px rgba(15, 23, 42, .40);
	transform: rotate(3deg);
	background: #fff;
}

/* ---------------- Other Solutions（面積は約半分） ---------------- */
.da-other {
	max-width: 880px;
	margin: var(--da-space-80) auto 0;
}
.da-other__title {
	margin: 0 0 var(--da-space-32);
	text-align: center;
	font-size: var(--da-fs-h4);
	font-weight: var(--da-fw-bold);
	color: var(--da-text-strong);
}
.da-other__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--da-space-24);
}
.da-other__more {
	margin-top: var(--da-space-16);
	font-size: var(--da-fs-small);
	font-weight: var(--da-fw-medium);
	color: var(--da-primary-600);
}
.da-c-card--link:hover .da-other__more { color: var(--da-primary-700); }

/* ---------------- セクション最後の CTA（→ Contact） ---------------- */
.da-solutions__cta {
	margin-top: var(--da-space-64);
	text-align: center;
}

/* ---------------- レスポンシブ ---------------- */
@media (min-width: 768px) {
	.da-featured__features { grid-template-columns: 1fr 1fr; }  /* 6項目→2列3行 */
	.da-other__cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.da-featured { padding: var(--da-space-64); }                /* 主役は余白を最も大きく */
	.da-featured__inner { grid-template-columns: 0.85fr 1fr; gap: var(--da-space-64); }
	.da-featured__title { font-size: 32px; }
	.da-solshot { max-width: 340px; }
}