/*
 * AWS SAP学習リソース - opscenter-guide 専用CSS
 * ページ固有のレイアウト・セクション・コンポーネントスタイル
 *
 * 自動生成日: 2026-01-11 18:19:11
 */

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
            padding: 20px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 25px 70px rgba(0,0,0,0.4);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            color: white;
            padding: 50px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: '🏥';
            position: absolute;
            font-size: 18em;
            opacity: 0.1;
            top: -30px;
            right: -30px;
        }
        
        .header h1 {
            font-size: 2.8em;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }
        
        .header p {
            font-size: 1.3em;
            opacity: 0.95;
            position: relative;
            z-index: 1;
        }
        
        .content {
            padding: 50px;
        }
        
        /* 結論ファーストセクション */
        .conclusion-first {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px;
            border-radius: 20px;
            margin-bottom: 50px;
            text-align: center;
        }
        
        .conclusion-first h2 {
            font-size: 2em;
            margin-bottom: 25px;
            color: #ffd700;
        }
        
        .conclusion-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 25px;
        }
        
        .conclusion-item {
            background: rgba(255,255,255,0.15);
            padding: 25px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }
        
        .conclusion-item .icon {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .conclusion-item .title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .conclusion-item .desc {
            font-size: 0.95em;
            opacity: 0.9;
        }
        
        /* たとえ話セクション */
        .analogy-section {
            background: linear-gradient(135deg, #fff5f5 0%, #fce7f3 100%);
            padding: 40px;
            border-radius: 20px;
            margin-bottom: 50px;
            border-left: 6px solid #ec4899;
        }
        
        .analogy-section h2 {
            color: #be185d;
            font-size: 2em;
            margin-bottom: 25px;
            text-align: center;
        }
        
        .hospital-diagram {
            display: grid;
            grid-template-columns: 1fr 100px 1fr;
            gap: 20px;
            align-items: center;
            margin-top: 30px;
        }
        
        .hospital-side, .aws-side {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .hospital-side {
            border-top: 4px solid #f43f5e;
        }
        
        .aws-side {
            border-top: 4px solid #8b5cf6;
        }
        
        .side-title {
            font-size: 1.4em;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .hospital-side .side-title {
            color: #e11d48;
        }
        
        .aws-side .side-title {
            color: #7c3aed;
        }
        
        .comparison-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px dashed #e5e7eb;
        }
        
        .comparison-item:last-child {
            border-bottom: none;
        }
        
        .comparison-icon {
            font-size: 1.5em;
            margin-right: 12px;
            width: 40px;
            text-align: center;
        }
        
        .comparison-text {
            font-size: 1em;
            color: #374151;
        }
        
        .arrow-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }
        
        .arrow {
            font-size: 2em;
            color: #9333ea;
        }
        
        /* OpsCenterの仕組み */
        .how-it-works {
            margin-bottom: 50px;
        }
        
        .how-it-works h2 {
            color: #1e293b;
            font-size: 2em;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .workflow-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .workflow-step {
            flex: 1;
            min-width: 200px;
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            position: relative;
            border: 2px solid #e2e8f0;
            transition: all 0.3s ease;
        }
        
        .workflow-step:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .workflow-step::after {
            content: '→';
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5em;
            color: #8b5cf6;
        }
        
        .workflow-step:last-child::after {
            display: none;
        }
        
        .step-number {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #8b5cf6, #a78bfa);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin: 0 auto 15px;
        }
        
        .step-icon {
            font-size: 2.5em;
            margin-bottom: 15px;
        }
        
        .step-title {
            font-size: 1.1em;
            font-weight: bold;
            color: #1e293b;
            margin-bottom: 10px;
        }
        
        .step-desc {
            font-size: 0.9em;
            color: #64748b;
        }
        
        /* OpsItemとは */
        .opsitem-section {
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
            padding: 40px;
            border-radius: 20px;
            margin-bottom: 50px;
        }
        
        .opsitem-section h2 {
            color: #1e40af;
            font-size: 2em;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .opsitem-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .opsitem-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #dbeafe;
        }
        
        .opsitem-header .icon {
            font-size: 3em;
            margin-right: 20px;
        }
        
        .opsitem-header .text h3 {
            color: #1e40af;
            font-size: 1.5em;
        }
        
        .opsitem-header .text p {
            color: #64748b;
        }
        
        .opsitem-fields {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
        }
        
        .field-item {
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            padding: 15px;
            border-radius: 10px;
            text-align: center;
        }
        
        .field-item .label {
            font-size: 0.85em;
            color: #64748b;
            margin-bottom: 5px;
        }
        
        .field-item .value {
            font-weight: bold;
            color: #0369a1;
        }
        
        /* 統合サービス */
        .integrations {
            margin-bottom: 50px;
        }
        
        .integrations h2 {
            color: #1e293b;
            font-size: 2em;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .integration-hub {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .integration-item {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            padding: 20px 30px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .integration-item:hover {
            transform: scale(1.05);
        }
        
        .integration-item.cloudwatch {
            background: linear-gradient(135deg, #fce7f3, #fbcfe8);
        }
        
        .integration-item.eventbridge {
            background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
        }
        
        .integration-item.securityhub {
            background: linear-gradient(135deg, #ccfbf1, #99f6e4);
        }
        
        .integration-item.configrule {
            background: linear-gradient(135deg, #fee2e2, #fecaca);
        }
        
        .integration-item .icon {
            font-size: 1.5em;
        }
        
        .integration-center {
            background: linear-gradient(135deg, #8b5cf6, #a855f7);
            color: white;
            padding: 30px 40px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
        }
        
        .integration-center .icon {
            font-size: 3em;
            margin-bottom: 10px;
        }
        
        .integration-center .title {
            font-size: 1.3em;
            font-weight: bold;
        }
        
        /* Automationランブック */
        .runbook-section {
            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
            padding: 40px;
            border-radius: 20px;
            margin-bottom: 50px;
        }
        
        .runbook-section h2 {
            color: #065f46;
            font-size: 2em;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .runbook-flow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .runbook-step {
            background: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            min-width: 180px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .runbook-step .icon {
            font-size: 2.5em;
            margin-bottom: 15px;
        }
        
        .runbook-step .title {
            font-weight: bold;
            color: #065f46;
            margin-bottom: 8px;
        }
        
        .runbook-step .desc {
            font-size: 0.9em;
            color: #64748b;
        }
        
        .runbook-arrow {
            font-size: 2em;
            color: #10b981;
        }
        
        /* ユースケース */
        .usecases {
            margin-bottom: 50px;
        }
        
        .usecases h2 {
            color: #1e293b;
            font-size: 2em;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .usecase-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }
        
        .usecase-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .usecase-card:hover {
            transform: translateY(-5px);
        }
        
        .usecase-header {
            padding: 20px;
            color: white;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .usecase-card:nth-child(1) .usecase-header {
            background: linear-gradient(135deg, #ef4444, #f97316);
        }
        
        .usecase-card:nth-child(2) .usecase-header {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }
        
        .usecase-card:nth-child(3) .usecase-header {
            background: linear-gradient(135deg, #10b981, #06b6d4);
        }
        
        .usecase-header .icon {
            font-size: 2em;
        }
        
        .usecase-header .title {
            font-size: 1.2em;
            font-weight: bold;
        }
        
        .usecase-body {
            padding: 25px;
        }
        
        .usecase-body p {
            color: #475569;
            margin-bottom: 15px;
        }
        
        .usecase-example {
            background: #f8fafc;
            padding: 15px;
            border-radius: 10px;
            border-left: 3px solid #8b5cf6;
        }
        
        .usecase-example .label {
            font-size: 0.85em;
            color: #8b5cf6;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .usecase-example .content {
            color: #64748b;
            font-size: 0.95em;
        }
        
        /* メリット */
        .benefits {
            background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
            color: white;
            padding: 40px;
            border-radius: 20px;
            margin-bottom: 50px;
        }
        
        .benefits h2 {
            font-size: 2em;
            margin-bottom: 30px;
            text-align: center;
            color: #fcd34d;
        }
        
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
        }
        
        .benefit-item {
            background: rgba(255,255,255,0.1);
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            backdrop-filter: blur(10px);
        }
        
        .benefit-item .icon {
            font-size: 2.5em;
            margin-bottom: 15px;
        }
        
        .benefit-item .title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .benefit-item .desc {
            font-size: 0.95em;
            opacity: 0.9;
        }
        
        /* 比較表 */
        .comparison-table {
            margin-bottom: 50px;
            overflow-x: auto;
        }
        
        .comparison-table h2 {
            color: #1e293b;
            font-size: 2em;
            margin-bottom: 30px;
            text-align: center;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        th {
            background: linear-gradient(135deg, #8b5cf6, #a855f7);
            color: white;
            padding: 18px 15px;
            text-align: left;
            font-weight: 600;
        }
        
        td {
            padding: 15px;
            border-bottom: 1px solid #e5e7eb;
            color: #374151;
        }
        
        tr:hover {
            background: #f8fafc;
        }
        
        tr:last-child td {
            border-bottom: none;
        }
        
        .check {
            color: #10b981;
            font-weight: bold;
        }
        
        .cross {
            color: #ef4444;
        }
        
        /* FAQ */
        .faq-section {
            margin-bottom: 50px;
        }
        
        .faq-section h2 {
            color: #1e293b;
            font-size: 2em;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .faq-item {
            background: white;
            border-radius: 15px;
            margin-bottom: 15px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        
        .faq-question {
            padding: 20px 25px;
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            font-weight: bold;
            color: #1e293b;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .faq-answer {
            padding: 20px 25px;
            color: #475569;
            line-height: 1.8;
        }
        
        /* まとめ */
        .summary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            color: white;
            padding: 50px;
            border-radius: 20px;
            text-align: center;
        }
        
        .summary h2 {
            font-size: 2.5em;
            margin-bottom: 30px;
        }
        
        .summary-content {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .summary-box {
            background: rgba(255,255,255,0.15);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            margin-bottom: 25px;
        }
        
        .summary-box h3 {
            font-size: 1.5em;
            margin-bottom: 15px;
        }
        
        .summary-box p {
            font-size: 1.1em;
            line-height: 1.8;
        }
        
        .key-points {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        
        .key-point {
            background: rgba(255,255,255,0.2);
            padding: 20px;
            border-radius: 12px;
        }
        
        .key-point .icon {
            font-size: 2em;
            margin-bottom: 10px;
        }
        
        .key-point .text {
            font-size: 1.1em;
            font-weight: bold;
        }
        
        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 2em;
            }
            
            .conclusion-grid {
                grid-template-columns: 1fr;
            }
            
            .hospital-diagram {
                grid-template-columns: 1fr;
            }
            
            .arrow-column {
                flex-direction: row;
                justify-content: center;
            }
            
            .workflow-container {
                flex-direction: column;
            }
            
            .workflow-step::after {
                content: '↓';
                position: static;
                display: block;
                margin-top: 15px;
                transform: none;
            }
            
            .key-points {
                grid-template-columns: 1fr;
            }
        }
    
    
    

    

    

    

    

    

    

    /* 読書進捗インジケーター */
    

    

    

    /* トップに戻るボタン */
    

    

    

    

    @media (max-width: 768px) {
        
        
        
        
        
    }