/* ========================================
   SERVICES PAGE STYLES - services.html専用
   サービスページ専用スタイル
   ======================================== */

/* サービスヒーローセクション */
.services-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: visible;
}

.services-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
    text-align: center;
    margin-top: 30px;
}

.services-hero-title {
    font-size: 6rem;
    font-weight: 300;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    opacity: 0;
    transform: translateY(-50px);
    transition: all 1s ease-out;
    text-align: center;
}

.services-hero-title.visible {
    opacity: 0.9;
    transform: translateY(0);
}

.services-hero-message {
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 50px 70px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 1.2s ease-out;
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 900px;
    width: 100%;
}

.services-hero-message.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: float 6s ease-in-out infinite;
}

.services-main-title {
    font-size: 2.3rem;
    line-height: 1.3;
    color: #2c3e50;
    margin: 0 0 25px 0;
    text-align: center;
    font-weight: 700;
}

.services-description {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    text-align: center;
    font-weight: 400;
}

/* サービス詳細セクションの共通スタイル */
.service-detail-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: visible;
    margin-bottom: 0;
}

.service-detail-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

.service-detail-content.workflow-layout {
    max-width: none !important;
    padding: 0 60px; /* 🔧 20px → 60px に変更（適度な余白を確保） */
}

.service-detail-title {
    display: block;
    width: 100%;
    font-size: 12rem;
    font-weight: 200;
    color: rgba(78, 205, 196, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s ease-out;
    user-select: none;
}

/* 汎用のservice-detail-titleは背景用の大きなタイトル（12rem）専用 */
.service-detail-title.visible {
    opacity: 1;
    transform: translateX(0);
}

/* workflow-layoutでは具体的なルールが優先される */

.service-detail-message {
    background: rgba(255, 255, 255, 0.75);  /* 🔧🔧 0.9 → 0.75 より控えめで自然な透明度に */
    border: none;  /* 🔧🔧 枠線を完全削除してシンプルに */
    border-radius: 12px;  /* 🔧🔧 15px → 12px さらに控えめに */
    padding: 25px 35px;  /* 🔧🔧 35px 45px → 25px 35px もう一回り小さく */
    backdrop-filter: blur(6px);  /* 🔧🔧 8px → 6px より自然なブラー */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);  /* 🔧🔧 影をさらに薄くしてシンプルに */
    opacity: 0;
    transform: translateY(100px) scale(0.8);
    transition: all 1.2s ease-out;
    position: relative;
    z-index: 3;
    max-width: 600px;  /* 🔧🔧 700px → 600px もう一回り小さく */
    max-height: 85vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.workflow-layout .service-detail-message {
    max-width: none !important;
    padding: 25px 35px !important; /* 🔧🔧 統一された更に小さいサイズに変更 */
}

.service-detail-message.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: float 6s ease-in-out infinite;  /* 🔧 ふわふわアニメーション継続 */
}

.service-detail-main-title {
    font-size: 1.8rem;  /* 🔧🔧 2rem → 1.8rem メッセージ縮小に合わせてタイトルも小さく */
    line-height: 1.3;
    color: #2c3e50;
    margin: 0 0 20px 0;  /* 🔧🔧 25px → 20px 下マージンも小さく */
    text-align: center;
    font-weight: 700;
}

.service-detail-description {
    text-align: center;
    margin-bottom: 10px;  /* 🔧🔧 40px → 30px 下マージンを小さく */
}

.service-detail-description p {
    font-size: 1rem;  /* 🔧🔧 1.1rem → 1rem メッセージ縮小に合わせて文字も小さく */
    line-height: 1.6;
    color: #555;
    margin: 0 0 12px 0;  /* 🔧🔧 15px → 12px 下マージンを小さく */
    text-align: center;
    font-weight: 400;
}

/* サービス特徴カード - PC版のみ */
@media (min-width: 481px) {
    .workflow-layout .service-features {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 30px !important;    /* 🔧 40px → 30px 横並び時の間隔も縮小 */
    margin: -30px 0 0 0 !important;  /* 🔧 統一された位置調整 */
    width: 100% !important;
    grid-template-columns: none !important;
    }
}

.service-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;              /* 🔧 20px → 15px 要素間隔を縮小 */
    margin-top: 0px;       /* 🔧 30px → 15px 位置を上げる */
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

/* 🔧🔧🔧 【階層整理】service-features - アニメーションなしでシンプルに */
.service-features.visible {
    opacity: 1;
    transform: translateY(0);
    /* 🚨 アニメーション削除 - 子要素のfeature-cardのみアニメーション */
}

@media (min-width: 481px) {
    .service-workspace .cockpit-layout .service-features {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 30px !important;    /* 🔧 40px → 30px 横並び時の間隔も縮小 */
        margin: -30px 0 0 0 !important;  /* 🔧 統一された位置調整 */
        width: 100% !important;
    }
}

/* 🔧 【縮小】ワークスペース図解コンテナ */
.workspace-diagram-container {
    position: relative;
    width: 100%;              /* 🔧 100% → 85% 幅を縮小 */
    max-width: none;        /* 🔧 none → 450px 最大幅を制限 */
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;     /* 🔧 セクション1と同じ角丸に統一 */
    padding: 20px !important;       /* 🔧 セクション1とのバランスを考慮した適切なサイズ */
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* 🔧🔧 【カクつき対策】transitionを細分化して競合回避 */
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    align-self: flex-start;
    margin-top: 0;           /* 🔧 マージンを最小限に */
    /* 🔧🔧 【GPU最適化】レンダリング最適化でスムーズ化 */
    will-change: transform;  /* GPU アクセラレーション明示 */
    transform: translateZ(0);  /* GPU レイヤー作成 */
}

.cockpit-top-section .workspace-diagram-container {
    margin-top: 0 !important;
    align-self: flex-start;
    vertical-align: top;
}

/* セクション3のappsheet-demo-container - セクション2と同じ設定 */
.appsheet-demo-container {
    position: relative;
    width: 100%;
    max-width: none;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    align-self: flex-start;
    margin-top: 0;
    will-change: transform;
    transform: translateZ(0);
}

.appsheet-top-section .appsheet-demo-container {
    margin-top: 0 !important;
    align-self: flex-start;
    vertical-align: top;
}

.appsheet-demo-container:hover {
    transform: scale(1.02) translateZ(0);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.appsheet-demo-container.visible {
    animation: float 6s ease-in-out infinite 3s;
}

.workspace-diagram-container:hover {
    transform: scale(1.02) translateZ(0);  /* 🔧 GPUレイヤー維持しながらscale効果 */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* 🔧🔧🔧 【カクつき根絶】図表コンテナにふわふわアニメーション追加 */
.workspace-diagram-container.visible {
    animation: float 6s ease-in-out infinite 3s;  /* 🔧🔧🔧 1.2s → 3s にさらに延長してカクつき完全解消 */
}

.workspace-diagram {
    width: 100%;
    height: auto;
    border-radius: 12px;     /* 🔧 15px → 12px コンテナ縮小に合わせて調整 */
    transition: all 0.3s ease;
    display: block;
}

.workspace-diagram:hover {
    transform: scale(1.02);
}

/* 円状統合図 */
.circular-integration-chart {
    width: 100%;
    height: auto;
    border-radius: 15px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(240, 248, 255, 0.9) 100%);
    padding: 15px !important;       /* 🔧 400px×400px固定に合わせてパディングを適正サイズに */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: block;
    position: relative;
    min-height: 400px !important;   /* minheight 400px で固定。修正しないように注意*/
    max-height: 400px !important;  /* maxheight 400px で固定。修正しないように注意*/
}

.circular-integration-chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 50% 50%, rgba(74, 144, 226, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(52, 168, 83, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.circular-integration-chart:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* チャートタイトル */
.chart-title {
    text-align: center;
    font-size: 1.1rem !important;   /* 🔧 400px×400px固定に合わせてチャートタイトルを適正サイズに */
    font-weight: 700;
    color: #1a2332;
    margin-bottom: 10px !important; /* 🔧 400px×400px固定に合わせて間隔を適正サイズに */
    position: relative;
    z-index: 1;
}

.chart-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #4285f4, #34a853);
    margin: 0px auto 0;
    border-radius: 2px;
}

/* 🔧 【超縮小】円状配置コンテナ */
.circular-container {
    position: relative;
    width: 100%;
    height: 320px !important;       /* 🔧 400px×400px固定に合わせて円状配置コンテナを調整 */
    margin: 0 auto;
    z-index: 1;
}

/* 🔧 【超縮小】中央の統合ハブ */
.central-hub {
    position: absolute;
    top: 52% !important;    /* 🚨 手動調整済み！位置変更禁止 - ユーザーが最適位置に調整済み */
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    border-radius: 50%;
    width: 90px !important;         /* 🔧 400px×400px固定に合わせて中央ハブを適正サイズに */
    height: 90px !important;        /* 🔧 400px×400px固定に合わせて中央ハブを適正サイズに */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 
        0 15px 35px rgba(66, 133, 244, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    animation: hubGlow 3s ease-in-out infinite alternate;
    z-index: 10;
}

@keyframes hubGlow {
    0% { box-shadow: 0 15px 35px rgba(66, 133, 244, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
    100% { box-shadow: 0 20px 45px rgba(66, 133, 244, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

.central-hub:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.central-hub .hub-icon {
    font-size: 1.8rem !important;  /* 🔧 400px×400px固定に合わせて中央ハブアイコンを適正サイズに */
    margin-bottom: 3px !important;  /* 🔧 適切な間隔に調整 */
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.central-hub .hub-title {
    font-size: 0.85rem !important; /* 🔧 400px×400px固定に合わせて中央ハブテキストを適正サイズに */
    font-weight: 700;
    margin-bottom: 2px !important;  /* 🔧 適切な間隔に調整 */
    line-height: 1.1;
    display: block !important;      /* 🔧 適切なサイズなので表示に */
}

.central-hub .hub-subtitle {
    font-size: 0.85rem !important; /* 🔧 400px×400px固定に合わせて中央ハブテキストを適正サイズに */
    font-weight: 700;
    margin-bottom: 2px !important;  /* 🔧 適切な間隔に調整 */
    line-height: 1.1;
    display: block !important;      /* 🔧 適切なサイズなので表示に */
}

.central-hub .hub-description {
    font-size: 0.4rem !important; /* 🚨 手動調整済み！サイズ変更禁止 - ユーザーが最適サイズに調整済み */
    opacity: 0.9;
    line-height: 1.2;
    display: block !important;      /* 🔧 適切なサイズなので表示に */
}

/* 🔧 【超縮小】サービス軌道（円状配置） */
.service-orbit {
    position: absolute;
    top: 57.5% !important;           /* 🚨 手動調整済み！位置変更禁止 - ユーザーが最適位置に調整済み */
    left: 53% !important;           /* 🚨 手動調整済み！位置変更禁止 - ユーザーが最適位置に調整済み */
    width: 130px !important;        /* 🔧 400px×400px固定に合わせて軌道を適正サイズに */
    height: 130px !important;       /* 🔧 400px×400px固定に合わせて軌道を適正サイズに */
    margin-left: -65px !important;  /* 🚨 手動調整済み！マージン変更禁止 - ユーザーが最適位置に調整済み */
    margin-top: -65px !important;   /* 🚨 手動調整済み！マージン変更禁止 - ユーザーが最適位置に調整済み */
    display: block !important;      /* 🔧 適切なサイズなので表示に */
}

/* 🔧 【超縮小】各サービスの位置指定（60度間隔） - 極小サイズでは非表示 */
/* 🚨 以下の各サービス軌道位置は手動調整済み！translateY値変更禁止 - ユーザーが最適円状配置に調整済み */
.gmail-orbit { transform: rotate(0deg) translateY(-112px) rotate(0deg) !important; display: block !important; }
.drive-orbit { transform: rotate(60deg) translateY(-112px) rotate(-60deg) !important; display: block !important; }
.sheets-orbit { transform: rotate(120deg) translateY(-112px) rotate(-120deg) !important; display: block !important; }
.appsheet-orbit { transform: rotate(180deg) translateY(-112px) rotate(-180deg) !important; display: block !important; }
.chat-orbit { transform: rotate(240deg) translateY(-112px) rotate(-240deg) !important; display: block !important; }
.calendar-orbit { transform: rotate(300deg) translateY(-112px) rotate(-300deg) !important; display: block !important; }

/* サービスノード */
.service-node {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid rgba(66, 133, 244, 0.2);
    border-radius: 50%;
    width: 95px !important;         /* 🔧 400px×400px固定に合わせてサービスノードを適正サイズに */
    height: 95px !important;        /* 🔧 400px×400px固定に合わせてサービスノードを適正サイズに */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 5;
}

.service-node:hover {
    transform: scale(1.15);
    box-shadow: 0 10px 25px rgba(66, 133, 244, 0.2);
    z-index: 15;
}

.service-node .service-icon {
    font-size: 1.6rem !important;  /* 🔧 400px×400px固定に合わせてサービスノードアイコンを適正サイズに */
    margin-bottom: 5px !important; /* 🔧 サービスノード拡大に合わせて間隔アップ */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.6rem !important;     /* 🔧 400px×400px固定に合わせてサービスノードアイコン高さを適正サイズに */
}

.service-node .service-icon img {
    width: 1.6rem !important;      /* 🔧 400px×400px固定に合わせてサービスノードアイコンを適正サイズに */
    height: 1.6rem !important;     /* 🔧 400px×400px固定に合わせてサービスノードアイコンを適正サイズに */
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.service-node .service-icon .emoji-fallback {
    font-size: 1.6rem !important;  /* 🔧 400px×400px固定に合わせてサービスノード絵文字を適正サイズに */
}

/* 🔧 【調整】特定サービスのアイコンサイズ拡大 */
.service-node.gmail .service-icon,
.service-node.appsheet .service-icon,
.service-node.chat .service-icon,
.service-node.calendar .service-icon {
    height: 1.8rem !important; /* 🔧 400px×400px固定に合わせて特定アイコン高さを適正サイズに */
}

.service-node.gmail .service-icon img,
.service-node.appsheet .service-icon img,
.service-node.chat .service-icon img,
.service-node.calendar .service-icon img {
    width: 1.8rem !important; /* 🔧 400px×400px固定に合わせて特定アイコンを適正サイズに */
    height: 1.8rem !important;/* 🔧 400px×400px固定に合わせて特定アイコンを適正サイズに */
}

.service-node.gmail .service-icon .emoji-fallback,
.service-node.appsheet .service-icon .emoji-fallback,
.service-node.chat .service-icon .emoji-fallback,
.service-node.calendar .service-icon .emoji-fallback {
    font-size: 1.8rem !important; /* 🔧 400px×400px固定に合わせて特定絵文字を適正サイズに */
}

.service-node .service-name {
    font-weight: 700;
    font-size: 0.9rem !important; /* 🔧 400px×400px固定に合わせてサービス名を適正サイズに */
    color: #1a2332;
    margin-bottom: 2px !important; /* 🔧 4px → 2px 間隔を調整 */
    line-height: 1.2;
}

.service-node .service-desc {
    font-size: 0.7rem !important; /* 🔧 400px×400px固定に合わせて説明文を適正サイズに */
    color: #666;
    line-height: 1.3;
}

/* 接続線（中央ハブから各サービスへ） */
.connection-lines {
    position: absolute;
    top: 52% !important;          /* 🚨 手動調整済み！位置変更禁止 - ユーザーが接続線の最適位置に調整済み */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 1px;
    z-index: 1;
}

.connection-line {
    position: absolute;
    width: 120px;                   /* 🔧 400px×400px固定に合わせて接続線長さを適正サイズに */
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(66, 133, 244, 0.3) 0%, 
        rgba(66, 133, 244, 0.1) 50%, 
        rgba(66, 133, 244, 0.3) 100%);
    transform-origin: 0 50%;
    animation: connectionPulse 3s ease-in-out infinite;
    display: block !important;      /* 🔧 適切なサイズなので表示に */
}

@keyframes connectionPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.line-1 { transform: rotate(0deg); }
.line-2 { transform: rotate(60deg); }
.line-3 { transform: rotate(120deg); }
.line-4 { transform: rotate(180deg); }
.line-5 { transform: rotate(240deg); }
.line-6 { transform: rotate(300deg); }

/* 各サービス固有の色分け */
.service-node.gmail { 
    border-color: rgba(234, 67, 53, 0.3); 
    background: linear-gradient(135deg, #ffffff 0%, #fef7f7 100%);
}
.service-node.gmail:hover { 
    border-color: #ea4335; 
    box-shadow: 0 10px 25px rgba(234, 67, 53, 0.2); 
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

.service-node.drive { 
    border-color: rgba(52, 168, 83, 0.3); 
    background: linear-gradient(135deg, #ffffff 0%, #f7fef8 100%);
}
.service-node.drive:hover { 
    border-color: #34a853; 
    box-shadow: 0 10px 25px rgba(52, 168, 83, 0.2); 
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.service-node.sheets { 
    border-color: rgba(52, 168, 83, 0.3); 
    background: linear-gradient(135deg, #ffffff 0%, #f7fef8 100%);
}
.service-node.sheets:hover { 
    border-color: #34a853; 
    box-shadow: 0 10px 25px rgba(52, 168, 83, 0.2); 
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.service-node.appsheet { 
    border-color: rgba(255, 193, 7, 0.3); 
    background: linear-gradient(135deg, #ffffff 0%, #fffef7 100%);
}
.service-node.appsheet:hover { 
    border-color: #ffc107; 
    box-shadow: 0 10px 25px rgba(255, 193, 7, 0.2); 
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}

.service-node.chat { 
    border-color: rgba(52, 168, 83, 0.3); 
    background: linear-gradient(135deg, #ffffff 0%, #f7fef8 100%);
}
.service-node.chat:hover { 
    border-color: #34a853; 
    box-shadow: 0 10px 25px rgba(52, 168, 83, 0.2); 
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.service-node.calendar { 
    border-color: rgba(66, 133, 244, 0.3); 
    background: linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
}
.service-node.calendar:hover { 
    border-color: #4285f4; 
    box-shadow: 0 10px 25px rgba(66, 133, 244, 0.2); 
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

/* レイアウト設定 */
.workflow-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 60px !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 60px !important; /* 🔧 20px → 60px に変更（適度な余白を確保） */
}

.workflow-layout .workflow-top-section {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}

.workflow-top-section .service-detail-title {
    flex: 0 0 100%;
    order: 1;
}

.workflow-top-section .service-detail-message {
    flex: 0 0 42%;
    order: 2;
    align-self: flex-start;
    margin-top: 0;
}

.workflow-top-section .service-detail-right {
    flex: 0 0 55%;
    order: 3;
}

.service-detail-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
}

.service-detail-right {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);  /* 🚨 X軸→Y軸に統一（子要素と同方向） */
    transition: all 1s ease-out;
}

/* 🔧🔧🔧 【階層整理】service-detail-right - アニメーションなしでシンプルに */
.service-detail-right.visible {
    opacity: 1;
    transform: translateY(0);  /* 🚨 X軸→Y軸に統一（子要素と同方向） */
    /* 🚨 アニメーション削除 - 子要素のfeature-cardのみアニメーション */
}

.workflow-top-section .service-detail-right {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    opacity: 0;
    transform: translateY(20px);  /* 🚨 X軸→Y軸に統一（子要素と同方向） */
    transition: all 1.2s ease-out;
    align-self: flex-start !important;
    margin-top: 0 !important;
}

.workflow-top-section .service-detail-right.visible {
    opacity: 1;
    transform: translateY(0);  /* 🚨 X軸→Y軸に統一（子要素と同方向） */
    /* 🚨 アニメーション削除 - 子要素のfeature-cardのみアニメーション */
}

/* 画像モーダル */
.workflow-diagram {
    cursor: pointer;
    transition: transform 0.3s ease-out;
}

.workflow-diagram:hover {
    transform: scale(1.02);  /* 🔧 1.05 → 1.02 に統一（コンテナと協調） */
}

.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;  /* 🔧 JavaScriptでのdisplay制御で使用 */
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;  /* 🔧 非表示時はクリックも無効化 */
    transition: all 0.3s ease-out;
}

.image-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;  /* 🔧 表示時はクリック可能に */
}

.image-modal-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: scale(0.8);
    transition: transform 0.3s ease-out;
    opacity: inherit;  /* 🔧 親要素の透明度を継承 */
    visibility: inherit;  /* 🔧 親要素の表示状態を継承 */
}

.image-modal.active .image-modal-content {
    transform: scale(1);
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: white;
    cursor: pointer;
    font-weight: bold;
    z-index: 1;  /* 🔧 親要素内での相対的な位置に変更 */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-out;
    opacity: inherit;  /* 🔧 親要素の透明度を継承 */
    visibility: inherit;  /* 🔧 親要素の表示状態を継承 */
}

.image-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .image-modal-content {
        max-width: 95%;
        max-height: 85%;
    }
    
    .image-modal-close {
        top: 10px;
        right: 15px;
        font-size: 2.5rem;
        width: 40px;
        height: 40px;
        opacity: inherit;  /* 🔧 レスポンシブでも親要素の透明度を継承 */
        visibility: inherit;  /* 🔧 レスポンシブでも親要素の表示状態を継承 */
    }
}

/* その他のレイアウト */
.cockpit-layout,
.appsheet-layout,
.management-layout,
.dataentry-layout,
.contact-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 0px;
}

.contact-top-section {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}

.service-contact .service-detail-content.contact-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 60px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 60px !important; /* 🔧 20px → 60px に変更（適度な余白を確保） */
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
}

.contact-top-section .service-detail-title {
    flex: 0 0 100%;
    order: 1;
}

.contact-top-section .service-detail-message {
    flex: 0 0 100%;
    order: 2;
    align-self: center;
    margin-top: 0;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* PC版・タブレット版（393幅以外）での表示制御 */
.service-contact .service-detail-description-desktop {
    display: block; /* デフォルトで表示 */
}

.service-contact .service-detail-description-mobile {
    display: none; /* デフォルトで非表示 */
    visibility: hidden;
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    left: -9999px;
}

/* contact-methodsの表示制御 - PC版・タブレット版（393幅以外） */
.service-contact .contact-methods-desktop {
    display: flex; /* デフォルトで表示 */
}

.service-contact .contact-methods-mobile {
    display: none; /* デフォルトで非表示 */
    visibility: hidden;
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    left: -9999px;
}

.service-contact .contact-layout .contact-methods {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 60px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 900px !important;
    padding: 0 40px !important; /* 🔧 20px → 40px に変更（contact-methodsは少し控えめに） */
}

/* 🔧🔧🔧 【緊急修正】contact-method-cardの配置を強制的に左揃え統一 🔧🔧🔧 */
.service-contact .contact-layout .contact-methods .contact-method-card {
    display: flex !important;
    align-items: flex-start !important;     /* 🔧 強制的に上端揃え */
    justify-content: flex-start !important; /* 🔧 強制的に左端揃え */
    flex-direction: row !important;         /* 🔧 強制的に横並び */
    gap: 25px !important;
    box-sizing: border-box !important;
    text-align: left !important;            /* 🔧 強制的に左寄せ */
}

/* 🔧🔧🔧 【左側専用修正】email-contactの強制左寄せ 🔧🔧🔧 */
.service-contact .contact-layout .contact-methods .contact-method-card.email-contact {
    justify-content: flex-start !important; /* 🔧 左側を強制的に左端揃え */
}

/* 🔧🔧🔧 【右側専用修正】meeting-contactも左寄せ統一 🔧🔧🔧 */
.service-contact .contact-layout .contact-methods .contact-method-card.meeting-contact {
    justify-content: flex-start !important; /* 🔧 右側も左端揃えで統一 */
}

/* 🔧🔧🔧 【内部要素の左揃え強制】method-contentとmethod-iconの統一配置 🔧🔧🔧 */
.service-contact .contact-layout .contact-methods .contact-method-card .method-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 0 !important;            /* 🔧 拡張を完全に禁止 */
    flex-shrink: 1 !important;          /* 🔧 縮小は許可 */
    flex-basis: auto !important;        /* 🔧 内容に応じた基本サイズ */
    width: auto !important;             /* 🔧 自動幅に設定 */
    min-width: 0 !important;            /* 🔧 最小幅をリセット */
    max-width: 65% !important;          /* 🔧 最大幅を65%に制限（調整可能） */
}

/* 🔧🔧🔧 【左側専用修正】email-contactのmethod-contentを強制左固定 + 子要素制御 🔧🔧🔧 */
.service-contact .contact-layout .contact-methods .contact-method-card.email-contact .method-content {
    align-self: flex-start !important;  /* 🔧 左側のmethod-contentを強制的に左端に固定 */
    margin-right: auto !important;      /* 🔧 右側に自動マージンで左寄せ強制 */
    margin-left: 0 !important;          /* 🔧 左マージンは0 */
    position: relative !important;      /* 🔧 位置制御のため */
    left: 0 !important;                 /* 🔧 左端に固定 */
    align-items: flex-start !important; /* 🔧 子要素を左端に配置 */
    text-align: left !important;        /* 🔧 テキストも左寄せ */
}

/* 🔧🔧🔧 【右側統一】meeting-contactのmethod-contentも左固定 🔧🔧🔧 */
.service-contact .contact-layout .contact-methods .contact-method-card.meeting-contact .method-content {
    align-self: flex-start !important;  /* 🔧 右側のmethod-contentも左端に固定 */
    margin-right: auto !important;      /* 🔧 右側に自動マージンで左寄せ強制 */
    margin-left: 0 !important;          /* 🔧 左マージンは0 */
    position: relative !important;      /* 🔧 位置制御のため */
    left: 0 !important;                 /* 🔧 左端に固定 */
}

.service-contact .contact-layout .contact-methods .contact-method-card .method-icon {
    flex-shrink: 0 !important;
    align-self: flex-start !important;      /* 🔧 アイコンも上端揃え */
    margin: 0 !important;                   /* 🔧 マージンリセット */
}

/* 🔧🔧🔧 【内部テキスト要素の左揃え強制】h4/p/spanの配置統一 🔧🔧🔧 */
.service-contact .contact-layout .contact-methods .contact-method-card .method-content h4 {
    text-align: left !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    padding: 0 !important;
}

.service-contact .contact-layout .contact-methods .contact-method-card .method-content p {
    text-align: left !important;
    margin: 0 0 15px 0 !important;
    width: 100% !important;
    padding: 0 !important;
}

.service-contact .contact-layout .contact-methods .contact-method-card .method-content .method-action {
    text-align: left !important;
    margin: 0 !important;
    padding: 10px 18px !important;          /* 🔧 既存のpaddingを維持 */
    display: inline-block !important;       /* 🔧 inline-blockに戻す */
    align-self: flex-start !important;      /* 🔧 左端に配置 */
    width: auto !important;                 /* 🔧 自動幅 */
    margin-left: 0 !important;              /* 🔧 左マージン強制0 */
    margin-right: auto !important;          /* 🔧 右マージン自動で左寄せ */
    position: relative !important;          /* 🔧 位置制御 */
    left: 0 !important;                     /* 🔧 左端固定 */
}

/* 🔧🔧🔧 【最終兵器】email-contactのmethod-actionを絶対確実に左固定 🔧🔧🔧 */
.service-contact .contact-layout .contact-methods .contact-method-card.email-contact .method-content .method-action {
    display: block !important;              /* 🔧 block要素にして完全制御 */
    text-align: left !important;
    margin: 0 0 0 0 !important;             /* 🔧 すべてのマージンを明示的に0 */
    padding: 10px 18px !important;
    width: fit-content !important;          /* 🔧 内容幅のみ */
    position: relative !important;
    left: 0 !important;
    right: auto !important;                 /* 🔧 右位置をautoに */
    transform: translateX(0) !important;    /* 🔧 X軸移動をリセット */
    justify-self: flex-start !important;    /* 🔧 グリッド要素として左寄せ */
    align-self: flex-start !important;      /* 🔧 フレックス要素として左寄せ */
    float: none !important;                 /* 🔧 float解除 */
    clear: none !important;                 /* 🔧 clear解除 */
}

/* 🔧🔧🔧 【強制リセット】他の全てのCSSをオーバーライド 🔧🔧🔧 */
.service-contact .contact-layout .contact-methods .contact-method-card.email-contact .method-content .method-action[style] {
    margin-left: 0 !important;
    left: 0 !important;
    right: auto !important;
    position: relative !important;
}

/* 🔧🔧🔧 【矢印を完全に無効化】method-arrowの非表示を確実に */
.service-contact .contact-layout .contact-methods .contact-method-card .method-arrow {
    display: none !important;               /* 🔧 矢印を完全に非表示 */
    visibility: hidden !important;          /* 🔧 さらに確実に非表示 */
    width: 0 !important;                    /* 🔧 幅を0に */
    height: 0 !important;                   /* 🔧 高さを0に */
    margin: 0 !important;                   /* 🔧 マージンを0に */
    padding: 0 !important;                  /* 🔧 パディングを0に */
}

/* 🔧🔧🔧 【レスポンシブ対応】モバイルでも左寄せを維持 🔧🔧🔧 */
@media (max-width: 768px) {
    .service-contact .contact-layout .contact-methods .contact-method-card.email-contact,
    .service-contact .contact-layout .contact-methods .contact-method-card.meeting-contact {
        text-align: left !important;        /* 🔧 レスポンシブでも左寄せを維持 */
    }
    
    .service-contact .contact-layout .contact-methods .contact-method-card.email-contact .method-content,
    .service-contact .contact-layout .contact-methods .contact-method-card.meeting-contact .method-content {
        align-self: flex-start !important;  /* 🔧 モバイルでも左固定 */
        text-align: left !important;        /* 🔧 モバイルでも左寄せテキスト */
        margin-right: auto !important;      /* 🔧 モバイルでも左寄せ強制 */
        margin-left: 0 !important;          /* 🔧 モバイルでも左マージン0 */
    }
}

/* PC版タイトル（デスクトップ用） */
.service-contact .service-detail-title-desktop {
    display: block !important;
    width: 100% !important;
    min-width: 100%;
    box-sizing: border-box;
    font-size: 2.5rem;
    font-weight: 700;
    color: rgba(78, 205, 196, 0.8);
    line-height: 1.3;
    margin: 0;
    text-align: left;
    white-space: nowrap;
    text-shadow: 0 0 20px rgba(78, 205, 196, 0.3);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 1s ease-out;
}

.service-contact .service-detail-title-desktop.visible {
    opacity: 1;
    transform: translateY(0);
}

/* モバイル版タイトル（PC版では非表示、393幅では表示） */
@media (min-width: 481px) {
    .service-contact .service-detail-title-mobile {
        display: none;
        width: 100% !important;
        min-width: 100%;
        box-sizing: border-box;
        font-size: 1.8rem;
        font-weight: 700;
        color: rgba(78, 205, 196, 0.8);
        line-height: 1.3;
        margin: 0;
        text-align: center;
        text-shadow: 0 0 20px rgba(78, 205, 196, 0.3);
        opacity: 0;
        transform: translateY(-20px);
        transition: all 1s ease-out;
    }
}

/* 特別オファーのスタイル */
.special-offer {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%);
    border: 2px solid rgba(255, 193, 7, 0.3);
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.offer-badge {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
    flex-shrink: 0;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

.offer-text {
    font-size: 0.9rem;
    color: #333;
    font-weight: 600;
    line-height: 1.4;
}

/* ========================================
   MAIN PAGE SERVICE STYLES - メインページサービススタイル
   index.htmlからstyle.cssに残存していたサービス関連スタイルを統合
   ======================================== */

/* 🔧 .service-section は sections.css に移植済み */

.service-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.service-title {
    font-size: 8rem;
    font-weight: 300;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    opacity: 0;
    text-align: center;
    transform: translateX(-100px);
    transition: all 1s ease-out;
}

.service-title.visible {
    opacity: 0.9;
    transform: translateX(0);
}

/* サービス円形の共通スタイル */
.service-circle {
    position: absolute;
    width: 216px;           /* 🔧 180px × 1.2 = 216px */
    height: 216px;          /* 🔧 180px × 1.2 = 216px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;          /* 🔧 20px × 1.2 = 24px */
    box-sizing: border-box;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 
                inset 0 2px 10px rgba(255, 255, 255, 0.3);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: scale(0.3) translateY(-100px);
    text-decoration: none;
    color: inherit;
}

.service-circle:hover {
    transform: scale(1.05) translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 
                inset 0 2px 15px rgba(255, 255, 255, 0.5);
    color: inherit;
    text-decoration: none;
}

/* 🎯 注記: 完全なメインページサービススタイルは慎重な確認後に段階的に統合予定 */

/* === Phase 6.8 Step 3A: サービスヒーロー＆円形配置スタイル === */

/* 🔧🔧🔧 【修正】サービス名と概要の文字重なりを解決 🔧🔧🔧 */
.service-hero-container {
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 60px 80px; /* 80px 120px → 60px 80px に縮小（余裕を持たせる） */
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 3;
    text-align: center;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 1s ease-out;
    
    /* 🔧 【追加】flexboxで確実な配置 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* 20px → 30px に拡大（要素間の距離をさらに確保） */
    max-width: 900px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央配置 */
}

.service-hero-container.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.service-name {
    font-size: 3.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 50px 0; /* 30px → 50px に拡大（距離をさらに確保） */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    white-space: normal; /* nowrap → normal に変更（改行を許可） */
    line-height: 1.2; /* 行間を調整 */
    text-align: center; /* 中央揃えを明示 */
}

.service-tagline {
    font-size: 1.4rem;
    color: #666;
    margin: 0;
    font-weight: 500;
    white-space: normal; /* nowrap → normal に変更（改行を許可） */
    line-height: 1.5; /* 行間を調整 */
    text-align: center; /* 中央揃えを明示 */
    max-width: 600px; /* 最大幅を設定して読みやすく */
}

/* サービス内容 - 五角形レイアウト */
.service-visual-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 700px;
    margin: 50px auto;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 60px 40px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-out;
}

.service-visual-container.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 中央のタイトル */
.service-center-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

/* 円の中の「ぷちっ」の部分 - アニメーション停止 */
.puchi-text {
    display: inline-block;
    transform-origin: center;
    /* animation: puchiShake 3000ms ease-in-out infinite; アニメーション停止 */
}

/* 円の中の「とDX」の部分 - 固定 */
.dx-text {
    display: inline-block;
}

/* サービス最初の「ぷちっ」の部分 - 揺らしアニメーション */
.service-puchi-text {
    display: inline-block;
    transform-origin: center;
    animation: puchiShake 1500ms ease-in-out infinite;    /* 🔧 3000ms → 1500ms (2倍速) */
}

/* サービス最初の「とDX」の部分 - 固定 */
.service-dx-text {
    display: inline-block;
}

/* 🎯 【Phase 6.4完了】puchiShakeアニメーションはanimations.cssに移植済み */

/* 五角形の頂点配置 - 時計回りに配置 */
/* 🎯 円形の位置調整ガイド 🎯
   各円形の位置は top/bottom と left/right で調整できます
   
   📏 位置調整の基本：
   - top: 上からの距離（数値を小さくすると上に移動）
   - bottom: 下からの距離（数値を小さくすると下に移動）
   - left: 左からの距離（数値を小さくすると左に移動）
   - right: 右からの距離（数値を小さくすると右に移動）
   
   💡 調整のコツ：
   - 10px刻みで調整するとバランスが良い
   - 五角形を保つために、対角線上の円は同じ距離に設定
   - 中央の「ぷちっとDX」から均等な距離になるように調整
*/

/* 1. 上部中央 - ピンク（業務フローの構築） */
.service-circle-1 {
    top: 30px;              /* 🔧 上からの距離（小さくすると上に移動）*/
    left: 36.5%;              /* 🔧 左右の中央位置（50%で中央固定）*/
    transform: translateX(-50%) scale(0.3) translateY(-100px);
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.8), rgba(255, 20, 147, 0.6));
    border: 2px solid rgba(255, 20, 147, 0.9);
    animation: bubbleFloat 6s ease-in-out infinite;
    animation-delay: 0s;
}

.service-visual-container.visible .service-circle-1 {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
    transition-delay: 0.5s;  /* 🔧 500ms後に出現 */
}

/* 2. 右上 - ブルー（GoogleWorkspace） */
.service-circle-2 {
    top: 190px;             /* 🔧 上からの距離（小さくすると上に移動）*/
    right: 60px;            /* 🔧 右からの距離（小さくすると右に移動）*/
    background: linear-gradient(135deg, rgba(123, 185, 255, 0.8), rgba(65, 105, 225, 0.6));
    border: 2px solid rgba(65, 105, 225, 0.9);
    animation: bubbleFloat 6s ease-in-out infinite;
    animation-delay: -1s;
}

.service-visual-container.visible .service-circle-2 {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-delay: 1s;    /* 🔧 1000ms後に出現 */
}

/* 3. 右下 - 緑（AppSheet） */
.service-circle-3 {
    bottom: 40px;          /* 🔧 下からの距離（小さくすると下に移動）*/
    right: 130px;           /* 🔧 右からの距離（小さくすると右に移動）*/
    background: linear-gradient(135deg, rgba(154, 255, 154, 0.8), rgba(50, 205, 50, 0.6));
    border: 2px solid rgba(50, 205, 50, 0.9);
    animation: bubbleFloat 6s ease-in-out infinite;
    animation-delay: -2s;
}

.service-visual-container.visible .service-circle-3 {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-delay: 1.5s;  /* 🔧 1500ms後に出現 */
}

/* 4. 左下 - オレンジ（マーケティング業務委託） */
.service-circle-4 {
    bottom: 40px;          /* 🔧 下からの距離（小さくすると下に移動）*/
    left: 130px;            /* 🔧 左からの距離（小さくすると左に移動）*/
    background: linear-gradient(135deg, rgba(255, 159, 67, 0.8), rgba(255, 140, 0, 0.6));
    border: 2px solid rgba(255, 140, 0, 0.9);
    animation: bubbleFloat 6s ease-in-out infinite;
    animation-delay: -3s;
}

.service-visual-container.visible .service-circle-4 {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-delay: 2s;    /* 🔧 2000ms後に出現 */
}

/* 5. 左上 - 紫（データ入力業務委託） */
.service-circle-5 {
    top: 190px;             /* 🔧 上からの距離（小さくすると上に移動）*/
    left: 60px;             /* 🔧 左からの距離（小さくすると左に移動）*/
    background: linear-gradient(135deg, rgba(162, 155, 254, 0.8), rgba(138, 43, 226, 0.6));
    border: 2px solid rgba(138, 43, 226, 0.9);
    animation: bubbleFloat 6s ease-in-out infinite;
    animation-delay: -4s;
}

.service-visual-container.visible .service-circle-5 {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-delay: 2.5s;  /* 🔧 2500ms後に出現 */
}

/* シャボン玉の光沢効果 */
.service-circle:before {
    content: '';
    position: absolute;
    top: 20px;
    left: 30px;
    width: 40px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    filter: blur(3px);
    opacity: 0.8;
    z-index: 1;
}

.service-circle:after {
    content: '';
    position: absolute;
    bottom: 30px;
    right: 40px;
    width: 20px;
    height: 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.6;
    z-index: 1;
}

/* サービス円形内のテキスト */
.service-circle-text {
    font-size: 1.2rem;      /* 🔧 1rem → 1.2rem に拡大 */
    font-weight: 600;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    line-height: 1.4;       /* 🔧 1.3 → 1.4 に調整（読みやすさ向上）*/
    z-index: 2;
    position: relative;
}

/* 🎯 【Phase 6.4完了】bubbleFloatアニメーションはsections.css/animations.cssに移植済み */

/* === Phase 6.8 Step 3C: 顧客メリット＆カルーセルシステム === */

/* 顧客メリット */
.service-benefits-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-out;
    min-height: auto; /* 自動高さに変更 */
}

/* service-title visibleと同じデザインを適用 - 新しいトランザクション */
.service-benefits-container .section-title {
    font-size: 4rem; /* 8remから6remに縮小 */
    font-weight: 300;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 40px 0;
    opacity: 0;
    text-align: center;
    transform: translateY(-50px) scale(1.2) rotate(5deg);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-weight: bold;
}

.service-benefits-container.visible .section-title {
    opacity: 0.9;
    transform: translateY(0) scale(1) rotate(0deg);
}

/* タイトル文字アニメーション */
.title-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(-30px) scale(0.5) rotate(10deg);
    transform-origin: center;
}

/* 🎯 【Phase 6.4完了】titleCharSlideアニメーションはanimations.cssに移植済み */

.service-benefits-container.visible {
    opacity: 1;
    transform: translateY(0);
}

/* カルーセルコンテナ */
.service-carousel-container {
    overflow: hidden;
    width: 90%;
    max-width: 1000px;
    height: 60vh; /* 高さを60%に縮小 */
    margin: 0 auto;
    position: relative;
}

/* カルーセルコントロール */
.carousel-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 30px;
    z-index: 100;
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 0.6s→0.4sに高速化 */
}

.carousel-controls.carousel-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.carousel-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    color: #2c3e50;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.carousel-indicators {
    display: flex;
    gap: 15px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.indicator.active {
    background: rgba(78, 205, 196, 0.8);
    border-color: rgba(78, 205, 196, 1);
    transform: scale(1.2);
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

.service-carousel-wrapper {
    display: flex;
    width: 500%; /* 5つのアイテム（4つ + 最初の複製） */
    /* アニメーションはJavaScriptで制御 */
}

.carousel-item {
    width: 20%; /* 5つのアイテムなので20%ずつ */
    flex-shrink: 0;
    padding: 0 20px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 0.6s→0.4sに高速化 */
}

.carousel-item.carousel-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.carousel-item.carousel-visible .service-benefit-item {
    opacity: 1; /* カルーセルアイテムが表示される時にservice-benefit-itemも表示 */
}

.service-benefit-item {
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    padding: 30px 40px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    opacity: 0; /* 初期状態を非表示に修正 */
    transform: translateX(0);
    height: 60vh; /* カルーセルコンテナと同じ高さ */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-benefit-item:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: rgba(78, 205, 196, 0.4);
}

/* カルーセルアニメーションはJavaScriptで制御 */

.service-benefit-title {
    font-size: 2.2rem; /* 1.3remから1.6remに拡大 */
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 12px 0;
    text-align: center;
    line-height: 1.4;
}

.service-benefit-description {
    font-size: 1rem;
    color: #555;
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

/* === Phase 6.8 Step 3E: 一元化サービス説明セクション＆統合ビジュアル === */

/* 🔧🔧🔧 【修正完了】一元化サービス説明セクション - 正常な動作設定 🔧🔧🔧 */
.service-example-container {
    height: 100vh; /* セクション高さを画面いっぱいに */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 30px; /* 🔧 80px 40px → 60px 30px に縮小（一回り小さく） */
    position: relative;
    z-index: 3;
    opacity: 0; /* 🔧 【復元】初期状態は非表示 */
    transform: translateY(50px); /* 🔧 【復元】初期位置から下にオフセット */
    transition: all 1s ease-out;
    overflow: visible; /* 🔧 シャボン玉が切り取られないように */
    width: 100%;
    margin: 0 auto;
    
    /* 🔧🔧🔧 【根本修正】問題の原因となっていたleft/rightを削除 🔧🔧🔧 */
    /* left: 0; right: 0; が position: relative で予期しない動作を引き起こしていた */
    
    /* 🔧 【確実な中央配置】シンプルで確実な方法 */
    margin-left: auto;   /* 左右中央揃えを強化 */
    margin-right: auto;  /* 左右中央揃えを強化 */
}

.service-example-container.visible {
    opacity: 1;
    transform: translateY(0); /* 🔧 !importantを削除 */
}

.service-example-content {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px; /* 25px → 20px に縮小 */
    padding: 40px 30px; /* 🔧 60px 40px → 40px 30px に縮小（一回り小さく） */
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    overflow: visible; /* 🔧 シャボン玉が切り取られないように */
    
    /* 🔧🔧🔧 統合後要素の基準コンテナとして設定 🔧🔧🔧 */
    position: relative;  /* 絶対配置の基準点として機能 */
    
    /* 🔧🔧🔧 【根本修正】確実な中央配置を強制 🔧🔧🔧 */
    margin-left: auto !important;   /* 左右中央揃えを強制 */
    margin-right: auto !important;  /* 左右中央揃えを強制 */
    
    /* 🔧 【追加】flexboxの子要素として確実に中央配置 */
    align-self: center;  /* flexboxの子要素として中央揃え */
    justify-self: center; /* グリッドレイアウトでも中央揃え */
}

/* 🔧🔧🔧 【修正】他のセクションタイトルと同じデザインに統一 🔧🔧🔧 */
.service-section-title {
    font-size: 4rem; /* 1.8rem → 4rem に拡大（section-titleと同じ） */
    font-weight: 300; /* 700 → 300 に変更（section-titleと同じ） */
    color: #333; /* #2c3e50 → #333 に変更（section-titleと同じ） */
    text-transform: uppercase; /* 大文字変換を追加 */
    letter-spacing: 0.1em; /* 文字間隔を追加 */
    margin: 0 0 40px 0; /* 20px → 40px に拡大（section-titleと同じ） */
    opacity: 0; /* 初期状態で非表示 */
    text-align: center;
    width: 100%;
    
    /* 🔧 【削除】グラデーション背景を削除してシンプルに */
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    /* background-clip: text; */
    
    /* 🔧 【追加】section-titleと同じアニメーション設定 */
    transform: translateY(-50px) scale(1.2) rotate(5deg);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-weight: bold; /* 最終的にboldを適用 */
}

/* 🔧🔧🔧 【追加】visibleクラス時のアニメーション 🔧🔧🔧 */
.service-example-container.visible .service-section-title {
    opacity: 0.9;
    transform: translateY(0) scale(1) rotate(0deg);
}

/* 🔧🔧🔧 統合セクション全体の設定 🔧🔧🔧 */
.service-integration-visual {
    position: relative;  /* 通常の配置フロー内で動作 */
    max-height: 55vh;    /* 画面の55%の高さに制限 */
    min-height: 400px;   /* 最小400pxを確保 */
    padding: 20px 0;     /* 上下に20pxの余白 */
    overflow: visible;   /* シャボン玉や統合後要素が切り取られないように */
    width: 100%;
    margin: 0 auto;
    text-align: center;
    
    /* 🔧 【重要】統合後要素のために高さを確保 */
    min-height: 450px;   /* 統合後要素が表示される余裕を確保 */
    
    /* 🔧 【微調整オプション】必要に応じてコメントアウト解除
    max-height: 60vh;    // より高くする場合
    min-height: 500px;   // さらに高さを確保する場合
    padding: 30px 0;     // 上下の余白を増やす場合
    */
}

/* === Phase 6.8 Step 3F: 3つの専門職＆風船アニメーション === */

/* 3つの専門職 */
.professional-roles {
    display: flex;
    justify-content: center; /* 🔧 !importantを削除 */
    align-items: center; /* 🔧 !importantを削除 */
    margin: 15px auto; /* 🔧 marginを統一して!importantを削除 */
    gap: 30px; /* 🔧 15px → 30px に拡大して均等配置 */
    flex-wrap: wrap;
    width: 100%; /* 🔧 幅を100%に設定 */
    max-width: 800px; /* 🔧 最大幅を設定 */
}

.professional-role {
    position: relative;
    min-width: 150px; /* 180px → 150px に縮小 */
    flex: 1;
    max-width: 220px; /* 280px → 220px に縮小 */
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2; /* 🔧 風船が背景に隠れないようにz-indexを追加 */
}

/* 風船の背景 */
.balloon {
    position: absolute;
    top: -20px; /* 🔧 -10px → -20px に拡大してより大きく表示 */
    left: -20px; /* 🔧 -10px → -20px に拡大してより大きく表示 */
    right: -20px; /* 🔧 -10px → -20px に拡大してより大きく表示 */
    bottom: -20px; /* 🔧 -10px → -20px に拡大してより大きく表示 */
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: -1; /* 🔧 z-index: 1 → -1 に変更してコンテンツの後ろに配置 */
}

.balloon-engineer {
    background: radial-gradient(circle at 30% 30%, rgba(78, 205, 196, 0.7), rgba(78, 205, 196, 0.4));
    box-shadow: 0 0 40px rgba(78, 205, 196, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.balloon-secretary {
    background: radial-gradient(circle at 30% 30%, rgba(255, 107, 107, 0.7), rgba(255, 107, 107, 0.4));
    box-shadow: 0 0 40px rgba(255, 107, 107, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.balloon-accounting {
    background: radial-gradient(circle at 30% 30%, rgba(196, 181, 253, 0.7), rgba(196, 181, 253, 0.4));
    box-shadow: 0 0 40px rgba(196, 181, 253, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.balloon-integrated {
    background: linear-gradient(135deg, rgba(123, 185, 255, 0.7), rgba(65, 105, 225, 0.5));
    box-shadow: 0 0 50px rgba(123, 185, 255, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.1);
}

/* 統合風船の浮遊アニメーション */
.service-box.balloon-visible .balloon-integrated {
    animation: balloonFloat 8s ease-in-out infinite;
}

/* 風船表示状態 */
.professional-role.balloon-visible .balloon,
.service-box.balloon-visible .balloon {
    opacity: 1;
    transform: scale(1);
}

/* コンテンツ */
.role-content {
    position: relative;
    z-index: 2;
    padding: 15px 12px; /* 20px 18px → 15px 12px に縮小 */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: none; /* 四角い背景を削除 */
    border: none;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.professional-role.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.professional-role:hover .role-content {
    transform: translateY(-5px) scale(1.02);
}

.professional-role:hover .balloon {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* 風船の混ざり合いアニメーション */
.professional-role.merging .balloon {
    animation: balloonMerge 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 🎯 【Phase 6.4完了】balloonMergeアニメーションはsections.cssに移植済み */

/* コンテンツの消失アニメーション */
.professional-role.merging .role-content {
    animation: contentFadeOut 3s ease-out forwards;
}

/* 🎯 【Phase 6.4完了】contentFadeOutアニメーションはsections.cssに移植済み */

.role-icon {
    font-size: 2rem; /* 2.5rem → 2rem に縮小 */
    margin-bottom: 8px; /* 12px → 8px に縮小 */
}

/* 🔧🔧🔧 【修正】専門職の文字を大きくする 🔧🔧🔧 */
.role-title {
    font-size: 1.8rem; /* 1.1rem → 1.6rem に拡大 */
    font-weight: 800; /* 700 → 800 により太く */
    color: white; /* 風船背景なので白文字に変更 */
    margin-bottom: 8px; /* 6px → 8px に拡大 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* より強いシャドウで視認性向上 */
    letter-spacing: 0.5px; /* 文字間隔を追加 */
}

.role-description {
    font-size: 0.9rem; /* 0.8rem → 0.9rem に微増（role-titleとのバランス） */
    color: rgba(255, 255, 255, 0.95); /* 0.9 → 0.95 に改善（視認性向上） */
    line-height: 1.3; /* 1.2 → 1.3 に改善 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* シャドウを追加 */
}

/* 🔧 .integration-arrow は sections.css に移植済み */

.arrow-line {
    width: 3px; /* 4px → 3px に縮小 */
    height: 35px; /* 50px → 35px に縮小 */
    background: linear-gradient(to bottom, #ff6b6b, #4ecdc4, #45b7d1);
    margin: 0 auto;
    border-radius: 3px; /* 4px → 3px に縮小 */
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.4); /* 20px → 15px に縮小 */
    animation: arrowPulse 2s ease-in-out infinite;
}

/* 🎯 【Phase 6.4完了】arrowPulseアニメーションはanimations.cssに移植済み */

.arrow-text {
    background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
    border: none;
    border-radius: 20px; /* 25px → 20px に縮小 */
    padding: 8px 16px; /* 12px 24px → 8px 16px に縮小 */
    font-size: 1rem; /* 1.2rem → 1rem に縮小 */
    font-weight: 700;
    color: white;
    position: relative; /* 🔧 absoluteからrelativeに変更 */
    display: inline-block;
    margin: 10px 0; /* 🔧 矢印ラインとの間隔を確保 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3); /* 8px 25px → 6px 20px に縮小 */
    animation: textBounce 2s ease-in-out infinite;
}

/* 🎯 【Phase 6.4完了】textBounceアニメーションはanimations.cssに移植済み */

.arrow-head {
    font-size: 2.2rem; /* 3rem → 2.2rem に縮小 */
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: -3px; /* -5px → -3px に調整 */
    animation: arrowHeadBounce 1.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 🎯 【Phase 6.4完了】arrowHeadBounceアニメーションはanimations.cssに移植済み */

/* 🎯 【Phase 6.4完了】balloonFloatアニメーションはanimations.cssに移植済み */

/* 🔧 .integrated-service.final-position は sections.css に移植済み */

/* 🔧 .integration-arrow.fade-out は sections.css に移植済み */

/* 🔧 @keyframes fadeOut は sections.css に移植済み */

/* 🔧 .integrated-service は sections.css に移植済み */

/* 🔧 .service-box は sections.css に移植済み */

/* 🔧 .service-content は sections.css に移植済み */

/* 統合風船の出現アニメーション */


/* 🔧🔧🔧 【修正】3つの専門職ロゴの合体表現 🔧🔧🔧 */
.service-logo {
    font-size: 2rem; /* 3つのロゴの基本サイズ */
    margin-bottom: -50px; /* service-nameに近づける */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -5px; /* ロゴ同士を重ねて合体感を演出 */
    position: relative;
}

/* 3つの専門職ロゴの個別設定 */
.logo-engineer {
    position: relative;
    z-index: 3;
    transform: rotate(-10deg) scale(1.1);
    animation: logoFloat1 3s ease-in-out infinite;
}

.logo-secretary {
    position: relative;
    z-index: 2;
    margin-left: -8px; /* 重ねて配置 */
    margin-right: -8px;
    transform: rotate(5deg) scale(1.0);
    animation: logoFloat2 3s ease-in-out infinite 0.5s;
}

.logo-accounting {
    position: relative;
    z-index: 1;
    transform: rotate(8deg) scale(1.05);
    animation: logoFloat3 3s ease-in-out infinite 1s;
}

/* 🎯 【Phase 6.4完了】logoFloat1/2/3アニメーションはanimations.cssに移植済み */

/* === Phase 6.8 Step 3G: サービスレスポンシブスタイル（最終段階） === */

/* レスポンシブデザイン（サービスセクション） */
@media (max-width: 768px) {
    .service-section {
        height: auto;
        min-height: 200vh;
        padding-top: 80px;
        margin-top: 0;
    }
    
    .service-title {
        font-size: 4rem;
    }
    
    /* 🔧🔧🔧 【修正】モバイル版でも文字重なりを防止 🔧🔧🔧 */
    .service-hero-container {
        padding: 40px 40px; /* 🔧 20px → 40px に変更（モバイルでも適度な余白を確保） */
        gap: 40px; /* 25px → 40px に拡大（モバイルでも距離をさらに確保） */
        max-width: 95%; /* モバイルで幅を調整 */
    }
    
    .service-name {
        font-size: 2.5rem; /* 2.8rem → 2.5rem に調整（適切なサイズ） */
        font-weight: 800;
        letter-spacing: 1px;
        margin-bottom: 35px; /* 20px → 35px に拡大（距離をさらに確保） */
        line-height: 1.3; /* モバイルで読みやすい行間 */
        padding: 0 10px; /* 左右に余白を追加 */
    }
    
    .service-tagline {
        font-size: 1.1rem;
        margin-top: 0; /* -3px → 0 に変更（重なりを防止） */
        line-height: 1.5; /* 読みやすい行間 */
        padding: 0 10px; /* 左右に余白を追加 */
        max-width: 90%; /* モバイルで幅を調整 */
    }
       
       /* 🔧🔧🔧 【根本修正】モバイル版一元化サービス説明 - left/rightを削除 🔧🔧🔧 */
       .service-example-container {
           height: 100vh;
           padding: 40px 40px; /* 🔧 20px → 40px に変更（モバイルでも適度な余白を確保） */
           /* 🔧 基本設定と同じ中央揃え設定を適用 */
           display: flex;
           align-items: center;
           justify-content: center;
           margin: 0 auto;
           /* 🔧 【根本修正】問題の原因となっていたleft/rightを削除 */
           margin-left: auto;
           margin-right: auto;
           /* left: 0; right: 0; を削除 - position: relativeで問題を引き起こしていた */
       }
       
       .service-example-content {
           padding: 30px 40px; /* 🔧 20px → 40px に変更（モバイルでも適度な余白を確保） */
           max-width: 100%;
           /* 🔧🔧🔧 【根本修正】メディアクエリ内でも中央揃えを強制 🔧🔧🔧 */
           margin: 0 auto !important;  /* 中央揃えを強制 */
           width: 100%;     /* 幅を明示的に設定 */
           
           /* 🔧 【追加】flexboxの子要素として確実に中央配置 */
           align-self: center;  /* flexboxの子要素として中央揃え */
           justify-self: center; /* グリッドレイアウトでも中央揃え */
       }
       
       /* 🔧🔧🔧 【修正】モバイル版でも他セクションタイトルと統一 🔧🔧🔧 */
       .service-section-title {
           font-size: 2.5rem; /* 2rem → 2.5rem に拡大 */
           font-weight: 300; /* section-titleと同じ */
           color: #333;
           text-transform: uppercase;
           letter-spacing: 0.08em; /* モバイルで少し狭く */
           margin-bottom: 30px;
           opacity: 0; /* 初期状態で非表示 */
           transform: translateY(-30px) scale(1.1) rotate(3deg); /* モバイル用に縮小 */
           transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           font-weight: bold;
       }
       
       .professional-roles {
           flex-direction: column;
           gap: 20px;
           margin: 30px 0;
       }
       
       .professional-role {
           min-width: auto;
           max-width: 100%;
           padding: 25px 20px;
       }
       
       .role-icon {
           font-size: 2.5rem;
       }
       
       /* 🔧🔧🔧 【修正】モバイル版でも専門職の文字を大きく 🔧🔧🔧 */
       .role-title {
           font-size: 1.8rem; /* 1.3rem → 1.8rem に拡大 */
           font-weight: 800;
           text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
           letter-spacing: 0.5px;
           margin-bottom: 10px;
       }
       
       .role-description {
           font-size: 1rem; /* 0.9rem → 1rem に拡大（モバイル版） */
           color: rgba(255, 255, 255, 0.95);
           line-height: 1.4; /* モバイルで読みやすく */
           text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
       }
       
       .service-box {
           padding: 30px 25px;
           max-width: 100%;
       }
       
       /* 🔧🔧🔧 【修正】タブレット版でもサービスネームを大きく 🔧🔧🔧 */
       .service-name {
           font-size: 2.4rem; /* 2rem → 2.4rem に拡大 */
           font-weight: 800;
           letter-spacing: 1px;
           margin-bottom: 12px;
       }
       
       .service-tagline {
           font-size: 1.05rem; /* 1rem → 1.05rem に微増 */
           margin-top: -4px; /* service-nameに近づける */
       }
    
         .service-visual-container,
     .service-benefits-container {
         padding: 40px 50px; /* 🔧 30px → 50px に変更（タブレットでも適度な余白を確保） */
     }
     
                     /* 🔧🔧🔧 【根本修正】service-example-containerの統一設定 - left/rightを削除 🔧🔧🔧 */
     .service-example-container {
         padding: 40px 50px; /* 🔧 30px → 50px に変更（タブレットでも適度な余白を確保） */
         /* 🔧 基本設定と同じ中央揃え設定を適用 */
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto;
         /* 🔧 【根本修正】問題の原因となっていたleft/rightを削除 */
         margin-left: auto;
         margin-right: auto;
         /* left: 0; right: 0; を削除 - position: relativeで問題を引き起こしていた */
     }
     
     /* モバイル版カルーセル調整 */
     .carousel-item {
         padding: 0 10px;
     }
     
     .service-benefit-item {
         padding: 20px 15px;
         height: 50vh; /* モバイル版はさらに小さく */
     }
     
     .service-carousel-container {
         width: 95%;
         height: 50vh; /* モバイル版は50%の高さ */
     }
     
     .service-benefit-title {
         font-size: 1.4rem; /* モバイル版も少し大きく */
     }
     
     .service-benefit-description {
         font-size: 0.9rem; /* モバイル版サイズ調整 */
     }
     
     .service-benefits-container {
         padding: 40px 40px 0px 40px; /* 🔧 30px → 40px に変更（モバイルでも適度な余白を確保） */
         min-height: calc(100vh + 80px);
     }
     
     /* モバイル版カルーセルコントロール */
     .carousel-controls {
         bottom: 20px;
         gap: 20px;
         transform: translateX(-50%) translateY(15px) scale(0.9);
     }
     
     .carousel-controls.carousel-visible {
         transform: translateX(-50%) translateY(0) scale(1);
     }
     
     .carousel-btn {
         width: 40px;
         height: 40px;
         font-size: 20px;
     }
     
     .indicator {
         width: 10px;
         height: 10px;
     }
     
           /* モバイル版でもservice-title visibleと同じスタイル */
      .service-benefits-container .section-title {
          font-size: 3rem; /* モバイル版を少し小さく */
      }
      
      /* モバイル版文字アニメーション調整 */
      .title-char {
          transform: translateY(-20px) scale(0.6) rotate(8deg);
      }
      
      /* 🎯 【Phase 6.4完了】titleCharSlide重複定義をanimations.cssに移植済み */
     
                     .service-visual-container {
         height: 600px;
         max-width: 95%;
         margin: 30px auto;
         padding: 40px 40px; /* 🔧 20px → 40px に変更（モバイルでも適度な余白を確保） */
     }
      
             .service-center-title {
           font-size: 2rem;
       }
       
       /* モバイル版「ぷちっ」アニメーション調整 */
       .service-puchi-text {
           animation: puchiShakeMobile 1500ms ease-in-out infinite;    /* 🔧 3000ms → 1500ms (2倍速) */
       }
       
       /* 🎯 【Phase 6.4完了】puchiShakeMobileアニメーションはanimations.cssに移植済み */
      
                 .service-circle {
        width: 156px;       /* 🔧 130px × 1.2 = 156px */
        height: 156px;      /* 🔧 130px × 1.2 = 156px */
        padding: 18px;      /* 🔧 15px × 1.2 = 18px */
        text-decoration: none;
        color: inherit;
    }
      
      /* モバイル版五角形配置 */
      /* 📱 モバイル版位置調整ガイド 
         モバイル版でも同様に位置を調整できます
         
         📏 モバイル調整の注意点：
         - 画面が小さいので、数値は小さめに調整
         - 5px刻みで微調整するのがおすすめ
         - 円のサイズが130pxなので、重ならないように注意
      */
      
      .service-circle-1 {
          top: 40px;          /* 🔧 上からの距離（モバイル版）*/
          transform: translateX(-50%) scale(0.3) translateY(-100px);
      }
      
      .service-visual-container.visible .service-circle-1 {
          transform: translateX(-50%) scale(1) translateY(0);
      }
      
      .service-circle-2 {
          top: 130px;         /* 🔧 上からの距離（モバイル版）*/
          right: 40px;        /* 🔧 右からの距離（モバイル版）*/
      }
      
      .service-circle-3 {
          bottom: 100px;      /* 🔧 下からの距離（モバイル版）*/
          right: 80px;        /* 🔧 右からの距離（モバイル版）*/
      }
      
      .service-circle-4 {
          bottom: 100px;      /* 🔧 下からの距離（モバイル版）*/
          left: 80px;         /* 🔧 左からの距離（モバイル版）*/
      }
      
      .service-circle-5 {
          top: 130px;         /* 🔧 上からの距離（モバイル版）*/
          left: 40px;         /* 🔧 左からの距離（モバイル版）*/
      }
      
             .service-circle-text {
           font-size: 1rem;    /* 🔧 0.85rem → 1rem に拡大 */
           line-height: 1.3;   /* 🔧 1.2 → 1.3 に調整 */
       }
      
      /* モバイル版光沢効果サイズ調整 */
      .service-circle:before {
          width: 30px;
          height: 15px;
          top: 15px;
          left: 20px;
      }
      
      .service-circle:after {
          width: 15px;
          height: 8px;
          bottom: 20px;
          right: 25px;
      }
    
    .service-example-roles {
        flex-direction: column;
        align-items: center;
    }
    
    .service-example-role {
        min-width: 200px;
    }
}