/* ==========================================
   セクション交互背景システム
   ページ全幅の薄い青と濃い青を交互表示
   ========================================== */

/* 基本背景色定義 */
:root {
    --bg-light: #F6FAFF;  /* 薄い背景（ほぼ白の淡い青） */
    --bg-dark: #EAF3FF;   /* 濃い背景（少し濃い淡い青） */
}

/* ========== セクション背景交互パターン ========== */

/* 1. ヒーローセクション - 独自背景（動画）のため除外 */
.hero {
    /* 既存の背景を維持 */
}

/* 2. トレーサビリティセクション - 薄い背景（1つ目） */
.traceability-infographic-section {
    background: var(--bg-light) !important;
    padding: 80px 0;
}

/* 3. 成長モデルセクション - 濃い背景（2つ目） */
.growth-model-v3 {
    background: var(--bg-dark) !important;
    padding: 100px 0;
}

/* 4. 導入プロセスセクション（steps） - 薄い背景（3つ目） */
.steps {
    background: var(--bg-light) !important;
    padding: 80px 0;
}

/* 5. DX前の課題セクション - 濃い背景（4つ目） */
.section-issues {
    background: var(--bg-dark) !important;
    padding: 80px 0 !important;
}

/* 6. DX失敗理由セクション - 薄い背景（5つ目） */
.failure {
    background: var(--bg-light) !important;
    padding: 80px 0;
}

/* 7. POC学習ループセクション - 薄い背景（6つ目） */
.poc-loop-section {
    background: var(--bg-light) !important;
    padding: 80px 0;
}

/* 8. DX副産物セクション - 濃い背景（7つ目） */
.dx-byproducts {
    background: var(--bg-dark) !important;
    padding: 80px 0;
}

/* 9. CTAセクション - 薄い背景（8つ目） */
.section-cta {
    background: var(--bg-light) !important;
    padding: 80px 0 !important;
}

/* CTAセクションの文字色調整（薄い背景に合わせる） */
.section-cta h2 {
    color: #07193B !important;
    text-shadow: none !important;
}

.section-cta p {
    color: #64748b !important;
}

/* ========== カード・コンテンツの浮き上がり強化 ========== */

/* トレーサビリティ：動画コンテナを白背景で浮かせる */
.traceability-video-container {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 0;
    overflow: hidden;
}

.traceability-feature-card {
    background: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* 成長モデル：ステップカードの影を強化 */
.growth-v3-step {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAFCFF 100%) !important;
    box-shadow: 0 12px 36px rgba(16, 56, 120, 0.14) !important;
}

.growth-v3-step:hover {
    box-shadow: 0 16px 48px rgba(16, 56, 120, 0.2) !important;
}

/* 導入プロセス：カードの影を強化 */
.step-card {
    background: #FFFFFF !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
}

.step-card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15) !important;
}

/* DX課題：リッチカードの影を強化 */
.issue-rich-card {
    background: #FFFFFF !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1) !important;
}

.issue-rich-card:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.15) !important;
}

/* DX失敗理由：カードの影を強化 */
.fcard {
    background: #FFFFFF !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
}

.fcard:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15) !important;
}

/* POC学習ループ：内部コンテナの背景を白に強化 */
.poc-loop-inner {
    background: #FFFFFF !important;
    box-shadow: 0 12px 40px rgba(15, 56, 120, 0.14) !important;
}

/* POC学習ループ：課題カード・ソリューションカードの影を強化 */
.poc-loop-problem-card,
.poc-loop-solution-step {
    background: #FFFFFF !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
}

/* DX副産物：カードの影を強化 */
.dx-card {
    background: #FFFFFF !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
}

.dx-card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15) !important;
}

/* ========== フッターメッセージ・バナーの背景調整 ========== */

/* 成長モデルのフッターメッセージ */
.growth-v3-footer {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF5D9 100%) !important;
    box-shadow: 0 8px 28px rgba(255, 193, 7, 0.18) !important;
}

/* ワンストップバナー */
.one-stop-banner {
    background: linear-gradient(135deg, #FFF4E6 0%, #FFE8CC 100%) !important;
    box-shadow: 0 8px 28px rgba(251, 146, 60, 0.15) !important;
}

/* ========== レスポンシブ調整 ========== */

/* タブレット（1024px以下） */
@media (max-width: 1024px) {
    .traceability-infographic-section,
    .growth-model-v3,
    .steps,
    .section-issues,
    .failure,
    .poc-loop-section,
    .dx-byproducts,
    .section-cta {
        padding: 60px 0;
    }
}

/* モバイル（768px以下） */
@media (max-width: 768px) {
    .traceability-infographic-section,
    .growth-model-v3,
    .steps,
    .section-issues,
    .failure,
    .poc-loop-section,
    .dx-byproducts,
    .section-cta {
        padding: 50px 0;
    }
}

/* 小型モバイル（480px以下） */
@media (max-width: 480px) {
    .traceability-infographic-section,
    .growth-model-v3,
    .steps,
    .section-issues,
    .failure,
    .poc-loop-section,
    .dx-byproducts,
    .section-cta {
        padding: 40px 0;
    }
}