/* スマホ表示のためのレスポンシブ対応修正 */
/* メインビジュアル全体のスタイルをリセット */
@media (max-width: 768px) {
	.main-visual {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		margin: 60px auto 10px !important;
		height: auto !important; /* 自動高さに変更 */
	}

	.main-visual-inner {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		gap: 15px !important;
	}

	.main-visual .left,
	.main-visual .right {
		width: 100% !important;
		height: 400px !important; /* 高さを増やして十分なコンテンツ表示領域を確保 */
		min-height: 400px !important; /* 最小高さも設定 */
		max-width: 100% !important; /* 最大幅を100%に制限 */
		background-position: center center !important; /* 背景画像の位置を中央に */
		background-size: cover !important; /* 背景画像をカバー */
		margin: 0 !important; /* マージンをリセット */
	}
}

/* さらに小さい画面サイズでも適切な高さを維持 */
@media (max-width: 480px) {
	.main-visual {
		margin: 65px auto 10px !important; /* マージンをさらに調整 */
	}

	.main-visual .left,
	.main-visual .right {
		height: 350px !important; /* 小さい画面でも十分な高さを確保 */
		min-height: 350px !important;
		background-position: center 40% !important; /* 背景画像の位置を少し上にして重要部分を表示 */
	}

	/* ボタン配置の最適化 */
	.main-visual .btn-container {
		width: 300px !important;
		flex-direction: row !important;
		bottom: 20px !important; /* 下からの位置を少し下げる */
		left: 50% !important;
		right: auto !important; /* 右からの位置は無効化 */
		transform: translateX(-50%) !important;
	}
}

/* タブレット表示用（1024px以下）の追加修正 */
@media (max-width: 1024px) and (min-width: 769px) {
	.main-visual-inner {
		display: flex !important;
		flex-direction: row !important; /* タブレットでは横並びを維持 */
		width: 100% !important;
		gap: 10px !important;
	}

	.main-visual .left,
	.main-visual .right {
		width: 50% !important; /* 均等に分割 */
		height: 450px !important; /* タブレットでの高さを設定 */
		background-size: cover !important;
	}
}

/* Flexboxのバグ修正用の追加スタイル */
.main-visual-inner {
	min-height: 0; /* IEのFlexboxバグ対応 */
	overflow: visible !important; /* はみ出し要素を表示 */
	box-sizing: border-box !important;
}

.main-visual .left,
.main-visual .right {
	flex-shrink: 0 !important; /* フレックスアイテムが縮まないように設定 */
	position: relative !important;
}

/* ボタン配置の全体修正 */
.main-visual .btn-container {
	display: flex !important;
	position: absolute !important;
	z-index: 10 !important;
}

/* コンテナの配置問題を修正するためのリセットスタイル */
.main-visual {
	box-sizing: border-box !important;
	overflow: hidden !important;
}

/* フォースリフロー用の無効なプロパティ（レンダリング問題の解決策） */
@media (max-width: 768px) {
	.main-visual-inner:after {
		content: "";
		display: table;
		clear: both;
	}
}