/* ========================================
   デジタルマーケティングページ専用スタイル
   BEM命名
   ======================================== */

/* ========================================
   イントロ：キーフレーズ（下線・青）
   ======================================== */
.section-header__body .section-header__accent {
    color: var(--color-main-dark-03);
    font-size: 18px;
    font-weight: 700;
}

/* イントロの課題カードは common.css の problem-cards-grid / problem-card を使用（THE PROBLEM のみ） */

/* ========================================
   リソルのデジタルマーケティングとは
   セクションは page-section 共通、カードのみ専用スタイル
   ======================================== */
.dm-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.dm-step-card {
    position: relative;
    background: var(--color-base);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
    overflow: hidden;
}

/* 3枚共通：上部ストライプ＋バッジ */
.dm-step-card__stripe {
    height: 8px;
    width: 100%;
}

.dm-step-card__stripe--blue {
    background: var(--color-main-dark-02);
}

.dm-step-card__stripe--teal {
    background: var(--color-main-01);
}

.dm-step-card__stripe--green {
    background: var(--color-accent);
}

.dm-step-card .dm-step-card__content {
    padding: var(--spacing-xl);
}

.dm-step-card__badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-base);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 6px;
    margin-bottom: var(--spacing-lg);
}

.dm-step-card__badge--blue {
    background: var(--color-main-dark-02);
}

.dm-step-card__badge--teal {
    background: var(--color-main-01);
}

.dm-step-card__badge--green {
    background: var(--color-accent);
}

.dm-step-card .dm-step-card__content .dm-step-card__title,
.dm-step-card .dm-step-card__content .dm-step-card__tag,
.dm-step-card .dm-step-card__content .dm-step-card__description {
    margin-left: 0;
    margin-right: 0;
}

.dm-step-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.4;
    margin-bottom: var(--spacing-md);
}

/* 領域タグ（薄灰背景・枠・角丸） */
.dm-step-card__tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: 0 var(--spacing-2xl) var(--spacing-md);
}

.dm-step-card__description {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 var(--spacing-2xl);
}

.dm-step-card__subtitle {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.dm-step-card__subtitle+.dm-step-card__description {
    margin-top: 0;
}

/* ========================================
   こんな課題をお持ちの企業様に
   ======================================== */
.dm-challenges__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

.dm-challenge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 14px;
    background: var(--color-base);
    padding: var(--spacing-2xl) var(--spacing-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.dm-challenge-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-bg-section-blue);
    border-radius: 50%;
    margin-bottom: var(--spacing-lg);
}

.dm-challenge-card__icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.dm-challenge-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.4;
    margin: 0 0 var(--spacing-md);
}

.dm-challenge-card__text {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.8;
    margin: 0;
}

@media (max-width: 992px) {
    .dm-challenges__grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   一貫性のあるWeb戦略最適化（比較テーブル）
   ======================================== */
.dm-comparison {
    /* background: var(--color-bg-solution); */
    padding: var(--spacing-5xl) 0;
}

.dm-comparison-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.dm-comparison-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.3;
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

.dm-comparison-table {
    background: var(--color-base);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.dm-comparison-row {
    display: grid;
    grid-template-columns: 180px 1fr 1fr;
    border-bottom: 1px solid var(--color-border-light);
}

.dm-comparison-row:last-child {
    border-bottom: none;
}

.dm-comparison-header {
    background: var(--color-bg-light);
}

.dm-comparison-cell {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.dm-comparison-cell--label {
    font-weight: 700;
    color: var(--color-main-dark-02);
    background: var(--color-base);
}

.dm-comparison-cell--highlight {
    background: rgba(24, 100, 171, 0.06);
    color: var(--color-main-dark-03);
    font-weight: 500;
}

.dm-comparison-cell--standard {
    font-weight: 500;
}

/* 提供サービスラインナップは common.css の service-lineup を使用 */

/* ========================================
   レスポンシブデザイン
   ======================================== */

@media (max-width: 992px) {
    .dm-steps-grid {
        grid-template-columns: 1fr;
    }

    .dm-comparison-row {
        grid-template-columns: 140px 1fr 1fr;
    }
}

/* スマホ */
@media (max-width: 768px) {
    .dm-comparison-container {
        padding: 0 var(--spacing-md);
    }

    .dm-step-card .dm-step-card__content {
        padding: 20px;
    }

    .dm-challenge-card {
        padding: 20px;
    }

    /* 比較テーブル: PCと同じ3列レイアウトを維持し、はみ出す場合は表のみ横スクロール */
    .dm-comparison-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--spacing-md));
        padding: 0 var(--spacing-md);
    }

    .dm-comparison-table {
        min-width: 480px;
    }

    .dm-comparison-cell {
        padding: 12px;
    }
}