/* =========================================
   ベーススタイル（モバイル - 600px以下）
   ========================================= */

@media screen and (max-width: 600px) {

	/* CSS変数のモバイル版調整（動的スケーリング適用） */
	:root {
		--font-size-subtitle: calc(240px * var(--scale-factor));
		--font-size-h1: calc(220px * var(--scale-factor));
		--font-size-h2: calc(140px * var(--scale-factor));
		--font-size-h3: calc(172px * var(--scale-factor));
		--font-size-h4: calc(124px * var(--scale-factor));
		--font-size-h5: calc(100px * var(--scale-factor));
		--font-size-xs: calc(60px * var(--scale-factor));
		--font-size-sm: calc(72px * var(--scale-factor));
		--font-size-base: calc(84px * var(--scale-factor));
		--font-size-lg: calc(96px * var(--scale-factor));
		--font-size-xl: calc(108px * var(--scale-factor));
		--spacing-xs: calc(4px * var(--scale-factor));
		--spacing-sm: calc(8px * var(--scale-factor));
		--spacing-md: calc(16px * var(--scale-factor));
		--spacing-lg: calc(24px * var(--scale-factor));
		--spacing-xl: calc(32px * var(--scale-factor));
		--spacing-xxl: calc(48px * var(--scale-factor));
	}

	/* レイアウト調整 */
	.container {
		padding: 0 var(--spacing-sm);
	}

	.section {
		padding: var(--spacing-lg) 0;
	}

	/* タイポグラフィ調整 */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: var(--spacing-sm);
	}

	/* ユーティリティクラス */
	.hide-mobile {
		display: none !important;
	}

	.show-mobile {
		display: block !important;
	}

	.text-center-mobile {
		text-align: center;
	}

	.grid {
		grid-template-columns: 1fr !important;
		gap: var(--spacing-md) !important;
	}

	.main-btn {
		border-radius: calc(32px * var(--scale-factor));
		justify-content: center;
		padding: calc(64px * var(--scale-factor)) calc(128px * var(--scale-factor));
	}

	.main-btn img {
		width: calc(96px * var(--scale-factor));
		height: calc(96px * var(--scale-factor));
	}

	.br-pc {
		display: none;
	}
}