/* =====================================================
   業界別 活用シーン ＆ 移行事例（統合セクション）
   旧: migration-cases + industry-usecase の2セクション
   新: 業界ごとに「活用ポイント → 移行事例」をセットで表示
   ===================================================== */

.industry-cases {
    padding: 56px 0;
    background: #f8fafc;
}

.industry-cases__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.5;
}

.industry-cases__lead {
    text-align: center;
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.industry-cases__conclusion {
    max-width: 820px;
    margin: 0 auto 28px;
    padding: 16px 20px;
    background: #eff6ff;
    border-left: 4px solid #2563EB;
    border-radius: 8px;
    color: #1e3a5f;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.7;
}

/* --- 3カラム（業界ごとに1カラム） --- */
/* PC: 3カラム / タブレット(≤1024px): 2カラム / モバイル(≤640px): 1カラム */
.industry-cases__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}

.industry-cases__column {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.industry-cases__column:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* ========================================
   カラーパレット（モノクロ + アクセント1色のネイビー）
   ======================================== */
:root {
    --ic-navy: #1e40af;
    --ic-navy-light: #eff6ff;
    --ic-text: #1f2937;
    --ic-text-sub: #6b7280;
    --ic-border: #e5e7eb;
    --ic-bg-subtle: #f9fafb;
    --ic-bg-gray: #f3f4f6;
}

/* --- ヘッダー部：業界名＋SVGアイコン＋バッジ --- */
.industry-cases__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ic-border);
}

/* 業界アイコン（Lucide SVG） */
.industry-cases__icon {
    width: 22px;
    height: 22px;
    color: var(--ic-navy);
    stroke-width: 2;
    flex-shrink: 0;
}

/* 旧 emoji スパン（使用されないが後方互換のため残す） */
.industry-cases__emoji {
    display: none;
}

.industry-cases__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ic-text);
    margin: 0;
    line-height: 1.3;
}

/* バッジ: ネイビー枠+白抜き（モノクロ化） */
.industry-cases__badge {
    display: inline-block;
    background: #ffffff;
    color: var(--ic-navy);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid var(--ic-navy);
    border-radius: 4px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ========================================
   課題共感パート（グレー系枠・モノクロ化）
   ======================================== */
.industry-cases__issue {
    background: var(--ic-bg-subtle);
    border-left: 3px solid var(--ic-text-sub);
    border-radius: 0 4px 4px 0;
    padding: 12px 14px;
    margin: 0 0 16px;
}

.industry-cases__issue-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ic-text-sub);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}

.industry-cases__issue-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ic-text);
    margin: 0;
}

/* ========================================
   キャッチコピー（ネイビー強調）
   ======================================== */
.industry-cases__catchphrase {
    font-size: 14px;
    font-weight: 600;
    color: var(--ic-navy);
    margin: 16px 0 14px;
    line-height: 1.6;
}

/* ========================================
   Before / After 図解（モノクロ統一版）
   ======================================== */
.industry-cases__diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: stretch;
    margin: 16px 0;
}

.industry-cases__diagram-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 10px;
    border-radius: 6px;
    min-width: 0;
}

/* 従来側: ライトグレー背景（課題の可視化） */
.industry-cases__diagram-col--before {
    background: var(--ic-bg-gray);
    border: 1px solid var(--ic-border);
}

/* CoreAX-B側: 薄いネイビー背景（解決の可視化） */
.industry-cases__diagram-col--after {
    background: var(--ic-navy-light);
    border: 1px solid var(--ic-navy);
}

.industry-cases__diagram-col-title {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 0.06em;
}

.industry-cases__diagram-col--before .industry-cases__diagram-col-title {
    color: var(--ic-text-sub);
}

.industry-cases__diagram-col--after .industry-cases__diagram-col-title {
    color: var(--ic-navy);
}

.industry-cases__diagram-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.3;
    min-width: 0;
    min-height: 36px; /* 3カード・上下項目の高さ統一（矢印を中央に） */
    font-weight: 500;
}

/* Before項目のアイコン・テキスト: グレー */
.industry-cases__diagram-col--before .industry-cases__diagram-item {
    color: var(--ic-text-sub);
}

.industry-cases__diagram-col--before .industry-cases__diagram-item svg {
    color: var(--ic-text-sub);
}

/* After項目のアイコン・テキスト: ネイビー */
.industry-cases__diagram-col--after .industry-cases__diagram-item {
    color: var(--ic-navy);
}

.industry-cases__diagram-col--after .industry-cases__diagram-item svg {
    color: var(--ic-navy);
}

/* Lucide SVG アイコン（共通サイズ） */
.industry-cases__diagram-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke-width: 2;
}

.industry-cases__diagram-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 中央の矢印: シンプルなSVG矢印（ネイビー） */
.industry-cases__diagram-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
}

.industry-cases__diagram-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--ic-navy);
    stroke-width: 2.5;
}

/* 旧設計の span ベース矢印（使用されないが後方互換） */
.industry-cases__diagram-arrow span {
    display: none;
}

/* タグ: カード最下部に固定配置（高さ統一のため margin-top: auto） */
.industry-cases__tags {
    margin-top: auto;
}

/* ========================================
   活用ポイントブロック（旧構成・現在未使用・保守用に残存）
   ======================================== */
.industry-cases__usage {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    flex: 1; /* 左右カードの活用ポイントエリアを同じ高さに揃え、divider位置を揃える */
}

.industry-cases__block-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2563EB;
    margin-bottom: 10px;
    display: block;
}

.industry-cases__usage-desc {
    font-size: 0.82rem; /* 3カラム化で幅が狭くなるため若干縮小（約13px） */
    color: #475569;
    line-height: 1.7;
    margin-bottom: 12px;
    flex: 1; /* 本文を伸縮させ、タグと区切り線の位置を左右で揃える */
}

.industry-cases__usage-desc strong {
    color: #1e293b;
    font-weight: 700;
}

.industry-cases__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.industry-cases__tag {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--ic-bg-gray);
    color: var(--ic-text-sub);
}

/* ========================================
   「こんな〜現場で特に効果的」ブロック
   ======================================== */
.industry-cases__effective {
    background: #fafafa;
    padding: 12px 14px;
    border-radius: 6px;
    margin-top: 12px;
}

.industry-cases__effective-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.4;
}

.industry-cases__effective-list {
    list-style: none;
    list-style-type: none; /* 冗長だがブラウザ互換性強化 */
    padding: 0;
    margin: 0;
}

.industry-cases__effective-list li {
    font-size: 0.76rem; /* 3カラム化で若干縮小（約12px） */
    color: #475569;
    line-height: 1.6;
    padding-left: 18px;
    position: relative;
    margin-bottom: 4px;
}

.industry-cases__effective-list li::before {
    content: "▸";
    position: absolute;
    left: 2px;
    top: 0;
    color: #2563eb;
    font-weight: 700;
}

.industry-cases__effective-list li:last-child {
    margin-bottom: 0;
}

/* ========================================
   活用ポイントと活用シーンの区切り
   ======================================== */
.industry-cases__divider {
    border: 0;
    border-top: 1px dashed #e2e8f0;
    margin: 0 0 14px 0;
}

/* ========================================
   移行事例ブロック
   ======================================== */
.industry-cases__migration {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.industry-cases__migration-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.industry-cases__migration-company {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-bottom: 10px;
    display: block;
}

.industry-cases__before,
.industry-cases__after {
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
}

.industry-cases__before {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    margin-bottom: 8px;
}

.industry-cases__before-label {
    font-size: 0.72rem;
    color: #991b1b;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.industry-cases__before-text {
    font-size: 0.82rem;
    color: #7f1d1d;
    line-height: 1.7;
    margin: 0;
}

.industry-cases__after {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
}

.industry-cases__after-label {
    font-size: 0.72rem;
    color: #166534;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.industry-cases__after-text {
    font-size: 0.82rem;
    color: #14532d;
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   注釈とCTA
   ======================================== */
.industry-cases__footnote {
    max-width: 1000px;
    margin: 16px auto 0;
    text-align: center;
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.7;
}

.industry-cases__cta {
    text-align: center;
    margin-top: 24px;
}

.industry-cases__cta-btn {
    display: inline-block;
    background: #f97316;
    color: #ffffff;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.industry-cases__cta-btn:hover {
    background: #ea580c;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35);
}

/* ========================================
   タブレット（1024px以下）: 3カラム → 2カラム
   3枚目（ホームセンター）が下段に単独表示される
   ======================================== */
@media (max-width: 1024px) {
    .industry-cases__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   モバイル（768px以下）: 2カラム → 1カラム縦積み
   ======================================== */
@media (max-width: 768px) {
    .industry-cases {
        padding: 60px 0;
    }

    .industry-cases__title {
        font-size: 1.3rem;
    }

    /* 縦積み（食品 → 医薬品 → ホームセンターの順） */
    .industry-cases__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .industry-cases__column {
        padding: 22px 20px;
    }

    /* モバイルでは文字サイズを元に戻す（幅に余裕が出るため） */
    .industry-cases__usage-desc {
        font-size: 0.88rem;
    }

    .industry-cases__tag {
        font-size: 0.72rem;
    }

    .industry-cases__effective-list li {
        font-size: 0.82rem;
    }

    /* モバイル: 図解を縦積みに変形（Before/矢印/After を上下に） */
    .industry-cases__catchphrase {
        font-size: 15px;
    }

    .industry-cases__diagram {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .industry-cases__diagram-item {
        font-size: 12px;
        min-height: 32px;
    }

    .industry-cases__diagram-item svg {
        width: 18px;
        height: 18px;
    }

    .industry-cases__diagram-col-title {
        font-size: 11px;
    }

    /* モバイル: SVG矢印を90度回転（下向きに） */
    .industry-cases__diagram-arrow {
        padding: 4px 0;
    }

    .industry-cases__diagram-arrow svg {
        transform: rotate(90deg);
    }

    .industry-cases__issue-text {
        font-size: 13px;
    }

    .industry-cases__cta-btn {
        width: 100%;
        max-width: 400px;
    }
}