/* =============================================================================
   ⚙️ SERVICE WORKFLOW - ワークフローサービス専用スタイル
   ============================================================================= */

/* 🔧🔧🔧 【ワークフローサービス色分け】専用カラーテーマ 🔧🔧🔧 */

/* 🔧🔧🔧 【ワークフロー専用タイトル】PC版のみに適用 🔧🔧🔧 */
.service-workflow .service-detail-content.workflow-layout .service-detail-title-desktop {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 2.5rem !important;  /* 🔧 12rem → 2.5rem 強制適用 */
    font-weight: 700 !important;   /* 🔧 200 → 700 強制適用 */
    color: rgba(177, 11, 94, 0.8) !important;  /* 🔧 ワークフロー専用のピンク色 */
    line-height: 1.3 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    text-shadow: 0 0 20px rgba(177, 11, 94, 0.3) !important;  /* 🔧 ピンク色の影 */
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    text-transform: none !important;  /* 🔧 uppercase解除 */
    letter-spacing: normal !important;  /* 🔧 0.1em解除 */
    user-select: text !important;  /* 🔧 none解除 */
}

.service-workflow .service-detail-content.workflow-layout .service-detail-title-desktop.visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* 🚨🚨🚨 【統一化】feature-card:hoverはcomponents.cssで一元管理 */
/* .service-workflow .feature-card:hover は削除 - components.cssに統一済み */

/* 🔧🔧🔧 【ワークフロー専用要素】追加スタイル 🔧🔧🔧 */

/* ワークフローアイコンの色分け */
.service-workflow .feature-icon {
    /* background: linear-gradient(135deg, rgba(177, 11, 94, 0.1), rgba(255, 105, 180, 0.1)); */
    color: rgba(177, 11, 94, 0.8);
}

/* ワークフローボタンの色分け */
.service-workflow .services-btn-primary {
    background: linear-gradient(135deg, rgba(177, 11, 94, 0.9), rgba(155, 10, 82, 0.8));
    border-color: rgba(177, 11, 94, 0.3);
}

.service-workflow .services-btn-primary:hover {
    box-shadow: 0 8px 25px rgba(177, 11, 94, 0.4);
}

/* ワークフローセクションのアクセント */
.service-workflow .service-detail-message {
    border-left: 4px solid rgba(177, 11, 94, 0.6);
}

/* ワークフロープロセス表示の色分け */
.service-workflow .workflow-process {
    border-left-color: rgba(177, 11, 94, 0.6);
}

.service-workflow .workflow-process::before {
    background: linear-gradient(180deg, rgba(177, 11, 94, 0.6), rgba(255, 105, 180, 0.4));
}

/* 🔧🔧🔧 【ワークフローテーマカラー】CSS変数定義 🔧🔧🔧 */
.service-workflow {
    --workflow-primary: rgba(177, 11, 94, 0.741);
    --workflow-secondary: rgba(255, 105, 180, 0.4);
    --workflow-accent: rgba(177, 11, 94, 0.6);
    --workflow-light: rgba(255, 105, 180, 0.1);
    --workflow-shadow: rgba(177, 11, 94, 0.3);
}

/* 🔧🔧🔧 【レスポンシブ対応】モバイル版の調整 🔧🔧🔧 */
@media (max-width: 768px) {
    .service-workflow .service-detail-content.workflow-layout .service-detail-title {
        font-size: 2rem !important;  /* 🔧 2.5rem → 2rem（モバイル版） */
        color: rgba(177, 11, 94, 0.8) !important;
    }
    
    .service-workflow .feature-card {
        border: 2px solid rgba(255, 105, 180, 0.2);
    }
    
    /* 🚨🚨🚨 【重複削除】feature-card:hoverはcomponents.cssで一元管理 */
    /* .service-workflow .feature-card:hover は削除 - components.cssに統一 */
}

@media (max-width: 480px) {
    .service-workflow .service-detail-content.workflow-layout .service-detail-title {
        font-size: 1.8rem !important;  /* 🔧 小画面での更なる縮小 */
    }
}