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

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #ff6b6b 0%, #feca57 25%, #48dbfb 50%, #ff9ff3 75%, #54a0ff 100%);
            padding: 20px;
            padding-top: 80px; /* 固定ヘッダー分のスペース確保 */
            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, #ff6b6b 0%, #ee5a24 50%, #f39c12 100%);
            color: white;
            padding: 50px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: '🚀';
            position: absolute;
            font-size: 20em;
            opacity: 0.1;
            top: -50px;
            right: -50px;
        }
        
        .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;
        }
        
        .intro {
            text-align: center;
            margin-bottom: 50px;
            padding: 40px;
            background: linear-gradient(135deg, #fff5f5 0%, #ffe8d6 100%);
            border-radius: 15px;
            border-left: 6px solid #ff6b6b;
        }
        
        .intro h2 {
            color: #c0392b;
            font-size: 2.2em;
            margin-bottom: 20px;
        }
        
        .intro-text {
            font-size: 1.2em;
            color: #922b21;
            line-height: 1.8;
        }
        
        /* 目次 */
        .toc {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 30px;
            border-radius: 15px;
            margin: 30px 0;
            border: 2px solid #dee2e6;
        }
        
        .toc h3 {
            color: #495057;
            font-size: 1.5em;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .toc-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        
        .toc-item {
            background: white;
            padding: 15px;
            border-radius: 10px;
            border-left: 4px solid;
            font-size: 0.95em;
            color: #495057;
            transition: all 0.3s ease;
        }
        
        .toc-item:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .toc-item:nth-child(1) { border-color: #e74c3c; }
        .toc-item:nth-child(2) { border-color: #f39c12; }
        .toc-item:nth-child(3) { border-color: #27ae60; }
        .toc-item:nth-child(4) { border-color: #3498db; }
        .toc-item:nth-child(5) { border-color: #9b59b6; }
        .toc-item:nth-child(6) { border-color: #1abc9c; }
        .toc-item:nth-child(7) { border-color: #e91e63; }
        .toc-item:nth-child(8) { border-color: #00bcd4; }
        .toc-item:nth-child(9) { border-color: #ff5722; }
        
        .toc-number {
            display: inline-block;
            width: 25px;
            height: 25px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
            font-size: 0.85em;
            font-weight: bold;
            margin-right: 10px;
        }
        
        /* セクション共通 */
        .section {
            margin: 50px 0;
        }
        
        .section-title {
            font-size: 2em;
            color: #1e293b;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 3px solid;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        /* たとえ話セクション */
        .analogy-section {
            background: linear-gradient(135deg, #e8f8f5 0%, #d1f2eb 100%);
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            border-left: 8px solid #1abc9c;
        }
        
        .analogy-title {
            color: #0e6655;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }
        
        .analogy-main {
            background: white;
            padding: 40px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .analogy-main h3 {
            color: #0e6655;
            font-size: 1.8em;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .analogy-comparison {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 20px;
            align-items: center;
            margin: 30px 0;
        }
        
        .analogy-box {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 25px;
            border-radius: 12px;
            text-align: center;
        }
        
        .analogy-box.restaurant {
            border: 3px solid #e74c3c;
        }
        
        .analogy-box.aws {
            border: 3px solid #3498db;
        }
        
        .analogy-box h4 {
            font-size: 1.3em;
            margin-bottom: 15px;
        }
        
        .analogy-box.restaurant h4 { color: #c0392b; }
        .analogy-box.aws h4 { color: #2980b9; }
        
        .analogy-equals {
            font-size: 2.5em;
            color: #7f8c8d;
        }
        
        .analogy-mapping {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        
        .mapping-item {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
        }
        
        .mapping-icon {
            font-size: 2em;
        }
        
        .mapping-text {
            flex: 1;
        }
        
        .mapping-text strong {
            display: block;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .mapping-text span {
            color: #7f8c8d;
            font-size: 0.9em;
        }
        
        /* ローリングデプロイ図解 */
        .rolling-visual-section {
            background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            border-left: 8px solid #f39c12;
        }
        
        .rolling-title {
            color: #7d5a00;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }
        
        .rolling-phases {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .phase-row {
            display: grid;
            grid-template-columns: 150px 1fr 200px;
            gap: 20px;
            align-items: center;
            padding: 20px 0;
            border-bottom: 2px dashed #e9ecef;
        }
        
        .phase-row:last-child {
            border-bottom: none;
        }
        
        .phase-label {
            font-weight: bold;
            color: #7d5a00;
            font-size: 1.1em;
        }
        
        .phase-tasks {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        
        .task-box {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            font-size: 1.1em;
            position: relative;
        }
        
        .task-old {
            background: linear-gradient(135deg, #95a5a6, #7f8c8d);
        }
        
        .task-new {
            background: linear-gradient(135deg, #27ae60, #2ecc71);
        }
        
        .task-starting {
            background: linear-gradient(135deg, #f39c12, #e67e22);
            animation: pulse 1s infinite;
        }
        
        .task-stopping {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            opacity: 0.6;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        .phase-description {
            color: #6c5a00;
            font-size: 0.95em;
            line-height: 1.6;
        }
        
        .rolling-config {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        
        .config-highlight {
            background: white;
            padding: 25px;
            border-radius: 12px;
            border-left: 5px solid #f39c12;
        }
        
        .config-highlight h4 {
            color: #7d5a00;
            margin-bottom: 10px;
            font-size: 1.2em;
        }
        
        .config-highlight p {
            color: #6c5a00;
            line-height: 1.7;
        }
        
        .config-highlight code {
            background: #fef9e7;
            padding: 2px 8px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            color: #9a7b00;
        }
        
        /* パイプラインフロー */
        .pipeline-section {
            background: linear-gradient(to bottom, #f8f9fa 0%, white 100%);
            padding: 50px 30px;
            border-radius: 20px;
            margin: 50px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .pipeline-title {
            text-align: center;
            font-size: 2.5em;
            color: #1e293b;
            margin-bottom: 40px;
            font-weight: bold;
        }
        
        .pipeline-flow {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 15px;
            margin-bottom: 40px;
        }
        
        .pipeline-stage {
            flex: 1;
            background: white;
            border-radius: 15px;
            padding: 25px 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            border-top: 5px solid;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .pipeline-stage:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }
        
        .pipeline-stage:nth-child(1) { border-color: #3498db; }
        .pipeline-stage:nth-child(2) { border-color: #9b59b6; }
        .pipeline-stage:nth-child(3) { border-color: #e74c3c; }
        .pipeline-stage:nth-child(4) { border-color: #27ae60; }
        
        .stage-number {
            position: absolute;
            top: -15px;
            left: 20px;
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.9em;
        }
        
        .stage-icon {
            font-size: 3em;
            text-align: center;
            margin-bottom: 15px;
        }
        
        .stage-name {
            font-size: 1.3em;
            font-weight: bold;
            text-align: center;
            color: #1e293b;
            margin-bottom: 8px;
        }
        
        .stage-service {
            text-align: center;
            font-family: 'Courier New', monospace;
            background: #f1f5f9;
            padding: 6px 12px;
            border-radius: 6px;
            color: #475569;
            font-size: 0.85em;
            margin-bottom: 15px;
        }
        
        .stage-desc {
            color: #64748b;
            line-height: 1.6;
            font-size: 0.9em;
        }
        
        .stage-arrow {
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.8em;
            color: #94a3b8;
            z-index: 10;
        }
        
        .pipeline-stage:last-child .stage-arrow {
            display: none;
        }
        
        /* デプロイ方式比較 */
        .deploy-comparison {
            background: white;
            padding: 40px;
            border-radius: 20px;
            margin: 50px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .comparison-title {
            text-align: center;
            font-size: 2em;
            color: #1e293b;
            margin-bottom: 35px;
            font-weight: bold;
        }
        
        .comparison-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .comparison-card {
            border-radius: 15px;
            padding: 30px;
            border: 3px solid;
        }
        
        .comparison-card.rolling {
            background: linear-gradient(to bottom, #e8f8f5 0%, white 100%);
            border-color: #1abc9c;
        }
        
        .comparison-card.bluegreen {
            background: linear-gradient(to bottom, #ebf5fb 0%, white 100%);
            border-color: #3498db;
        }
        
        .comparison-card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .comparison-card-icon {
            font-size: 2.5em;
        }
        
        .comparison-card h4 {
            font-size: 1.5em;
        }
        
        .comparison-card.rolling h4 { color: #0e6655; }
        .comparison-card.bluegreen h4 { color: #21618c; }
        
        .comparison-card-badge {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .comparison-card.rolling .comparison-card-badge {
            background: #d5f5e3;
            color: #0e6655;
        }
        
        .comparison-card.bluegreen .comparison-card-badge {
            background: #d6eaf8;
            color: #21618c;
        }
        
        .comparison-list {
            list-style: none;
            padding: 0;
        }
        
        .comparison-list li {
            padding: 10px 0;
            padding-left: 30px;
            position: relative;
            border-bottom: 1px dashed #e9ecef;
        }
        
        .comparison-list li:last-child {
            border-bottom: none;
        }
        
        .comparison-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #27ae60;
            font-weight: bold;
        }
        
        /* 判断フローチャート */
        .decision-flow {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 15px;
            margin-top: 30px;
        }
        
        .decision-flow h4 {
            text-align: center;
            color: #495057;
            margin-bottom: 25px;
            font-size: 1.3em;
        }
        
        .decision-tree {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        
        .decision-node {
            background: white;
            padding: 15px 25px;
            border-radius: 10px;
            border: 2px solid #667eea;
            text-align: center;
            max-width: 400px;
        }
        
        .decision-node.question {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
        }
        
        .decision-node.answer {
            border-color: #27ae60;
        }
        
        .decision-node.answer.rolling {
            background: #d5f5e3;
            color: #0e6655;
        }
        
        .decision-node.answer.bluegreen {
            background: #d6eaf8;
            color: #21618c;
        }
        
        .decision-branches {
            display: flex;
            gap: 50px;
        }
        
        .decision-branch {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        
        .branch-label {
            background: #e9ecef;
            padding: 5px 15px;
            border-radius: 15px;
            font-size: 0.9em;
            color: #495057;
        }
        
        .decision-arrow {
            color: #94a3b8;
            font-size: 1.5em;
        }
        
        /* 実装手順 */
        .implementation-section {
            background: linear-gradient(135deg, #e8daef 0%, #d2b4de 100%);
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            border-left: 8px solid #8e44ad;
        }
        
        .implementation-title {
            color: #5b2c6f;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }
        
        .step-timeline {
            position: relative;
            padding-left: 50px;
        }
        
        .step-timeline::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(to bottom, #8e44ad, #9b59b6, #a569bd);
        }
        
        .step-item {
            position: relative;
            margin-bottom: 30px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .step-item::before {
            content: attr(data-step);
            position: absolute;
            left: -50px;
            top: 25px;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #8e44ad, #9b59b6);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.1em;
        }
        
        .step-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .step-icon {
            font-size: 2em;
        }
        
        .step-item h4 {
            color: #5b2c6f;
            font-size: 1.4em;
        }
        
        .step-content {
            color: #6c3483;
            line-height: 1.8;
        }
        
        .step-content ul {
            margin: 15px 0;
            padding-left: 20px;
        }
        
        .step-content li {
            margin: 8px 0;
        }
        
        .step-substeps {
            background: #f8f4fc;
            padding: 20px;
            border-radius: 10px;
            margin-top: 15px;
        }
        
        .step-substeps h5 {
            color: #5b2c6f;
            margin-bottom: 10px;
        }
        
        /* コード例 */
        .code-section {
            background: white;
            padding: 40px;
            border-radius: 20px;
            margin: 50px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .code-section-title {
            text-align: center;
            font-size: 2em;
            color: #1e293b;
            margin-bottom: 35px;
            font-weight: bold;
        }
        
        .code-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .code-tab {
            padding: 10px 20px;
            background: #e9ecef;
            border-radius: 8px 8px 0 0;
            font-weight: bold;
            color: #495057;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .code-tab.active {
            background: #1e293b;
            color: white;
        }
        
        .code-example {
            background: #1e293b;
            color: #f1f5f9;
            padding: 25px;
            border-radius: 0 12px 12px 12px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.85em;
            line-height: 1.7;
            margin-bottom: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        
        .code-title {
            color: #60a5fa;
            font-weight: bold;
            margin-bottom: 15px;
            font-size: 1.1em;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .code-comment { color: #94a3b8; }
        .code-keyword { color: #f472b6; }
        .code-string { color: #34d399; }
        .code-number { color: #fbbf24; }
        .code-important { color: #fb923c; background: rgba(251, 146, 60, 0.2); padding: 0 4px; border-radius: 3px; }
        
        .code-note {
            background: #fef3c7;
            padding: 15px 20px;
            border-radius: 8px;
            border-left: 4px solid #f59e0b;
            margin-top: 15px;
            color: #92400e;
            font-family: 'Segoe UI', sans-serif;
        }
        
        /* IAMポリシー */
        .iam-section {
            background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            border-left: 8px solid #e91e63;
        }
        
        .iam-title {
            color: #880e4f;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }
        
        .iam-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }
        
        .iam-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .iam-card h4 {
            color: #880e4f;
            font-size: 1.3em;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .iam-card p {
            color: #ad1457;
            margin-bottom: 15px;
            line-height: 1.7;
        }
        
        .iam-permissions {
            background: #fce4ec;
            padding: 15px;
            border-radius: 10px;
        }
        
        .iam-permissions h5 {
            color: #880e4f;
            margin-bottom: 10px;
        }
        
        .iam-permissions ul {
            list-style: none;
            padding: 0;
        }
        
        .iam-permissions li {
            padding: 5px 0;
            padding-left: 20px;
            position: relative;
            color: #ad1457;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
        }
        
        .iam-permissions li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: #e91e63;
        }
        
        /* トラブルシューティング */
        .troubleshoot-section {
            background: linear-gradient(135deg, #ffcccc 0%, #ffb3b3 100%);
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            border-left: 8px solid #e74c3c;
        }
        
        .troubleshoot-title {
            color: #922b21;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }
        
        .troubleshoot-item {
            background: white;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .troubleshoot-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .troubleshoot-icon {
            font-size: 2em;
        }
        
        .troubleshoot-item h4 {
            color: #922b21;
            font-size: 1.3em;
        }
        
        .troubleshoot-error {
            background: #fee2e2;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            color: #991b1b;
        }
        
        .troubleshoot-solution {
            color: #7b241c;
            line-height: 1.8;
        }
        
        .troubleshoot-solution h5 {
            color: #922b21;
            margin-bottom: 10px;
        }
        
        .troubleshoot-solution ul {
            margin: 10px 0;
            padding-left: 20px;
        }
        
        .troubleshoot-command {
            background: #1e293b;
            color: #f1f5f9;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 0.85em;
            margin: 15px 0;
            overflow-x: auto;
        }
        
        /* 監視設定 */
        .monitoring-section {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            border-left: 8px solid #2196f3;
        }
        
        .monitoring-title {
            color: #0d47a1;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }
        
        .monitoring-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }
        
        .monitoring-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .monitoring-card-icon {
            font-size: 3em;
            margin-bottom: 15px;
        }
        
        .monitoring-card h4 {
            color: #0d47a1;
            font-size: 1.2em;
            margin-bottom: 15px;
        }
        
        .monitoring-card p {
            color: #1565c0;
            line-height: 1.7;
            font-size: 0.95em;
        }
        
        .monitoring-metrics {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 10px;
            margin-top: 15px;
            text-align: left;
        }
        
        .monitoring-metrics h5 {
            color: #0d47a1;
            margin-bottom: 10px;
            font-size: 0.95em;
        }
        
        .monitoring-metrics ul {
            list-style: none;
            padding: 0;
        }
        
        .monitoring-metrics li {
            padding: 5px 0;
            color: #1565c0;
            font-size: 0.9em;
        }
        
        /* コスト */
        .cost-section {
            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            border-left: 8px solid #4caf50;
        }
        
        .cost-title {
            color: #1b5e20;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }
        
        .cost-table {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .cost-table table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .cost-table th {
            background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
            color: white;
            padding: 18px;
            text-align: left;
        }
        
        .cost-table td {
            padding: 15px 18px;
            border-bottom: 1px solid #e8f5e9;
            color: #2e7d32;
        }
        
        .cost-table tr:hover {
            background: #f1f8e9;
        }
        
        .cost-free {
            color: #4caf50;
            font-weight: bold;
        }
        
        .cost-tips {
            background: white;
            padding: 25px;
            border-radius: 15px;
            margin-top: 25px;
        }
        
        .cost-tips h4 {
            color: #1b5e20;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .cost-tips ul {
            list-style: none;
            padding: 0;
        }
        
        .cost-tips li {
            padding: 10px 0;
            padding-left: 30px;
            position: relative;
            color: #2e7d32;
            border-bottom: 1px dashed #c8e6c9;
        }
        
        .cost-tips li:last-child {
            border-bottom: none;
        }
        
        .cost-tips li::before {
            content: '💡';
            position: absolute;
            left: 0;
        }
        
        /* マルチ環境 */
        .multi-env-section {
            background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            border-left: 8px solid #ff9800;
        }
        
        .multi-env-title {
            color: #e65100;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }
        
        .env-pipeline {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .env-stages {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .env-stage {
            flex: 1;
            min-width: 120px;
            text-align: center;
            padding: 20px;
            border-radius: 12px;
            position: relative;
        }
        
        .env-stage.source { background: linear-gradient(135deg, #a29bfe, #6c5ce7); color: white; }
        .env-stage.build { background: linear-gradient(135deg, #fd79a8, #e84393); color: white; }
        .env-stage.dev { background: linear-gradient(135deg, #81ecec, #00cec9); color: #006266; }
        .env-stage.approval { background: linear-gradient(135deg, #ffeaa7, #fdcb6e); color: #6c5a00; }
        .env-stage.staging { background: linear-gradient(135deg, #74b9ff, #0984e3); color: white; }
        .env-stage.prod { background: linear-gradient(135deg, #55efc4, #00b894); color: #006266; }
        
        .env-stage-icon {
            font-size: 2em;
            margin-bottom: 8px;
        }
        
        .env-stage-name {
            font-weight: bold;
            font-size: 1em;
        }
        
        .env-arrow {
            font-size: 1.5em;
            color: #bdc3c7;
        }
        
        .env-description {
            margin-top: 25px;
            color: #e65100;
            line-height: 1.8;
        }
        
        /* FAQ */
        .faq-section {
            background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            border-left: 8px solid #9c27b0;
        }
        
        .faq-title {
            color: #4a148c;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }
        
        .faq-item {
            background: white;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .faq-question {
            font-size: 1.2em;
            font-weight: bold;
            color: #4a148c;
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        
        .faq-answer {
            color: #6a1b9a;
            line-height: 1.8;
            padding-left: 35px;
        }
        
        /* チェックリスト */
        .checklist-section {
            background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
            padding: 50px;
            border-radius: 20px;
            margin: 50px 0;
            border-left: 8px solid #00bcd4;
        }
        
        .checklist-title {
            color: #006064;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
        }
        
        .checklist-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }
        
        .checklist-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .checklist-card h4 {
            color: #006064;
            font-size: 1.3em;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .checklist-items {
            list-style: none;
            padding: 0;
        }
        
        .checklist-items li {
            padding: 10px 0;
            padding-left: 35px;
            position: relative;
            color: #00838f;
            border-bottom: 1px dashed #b2ebf2;
        }
        
        .checklist-items li:last-child {
            border-bottom: none;
        }
        
        .checklist-items li::before {
            content: '☐';
            position: absolute;
            left: 0;
            font-size: 1.2em;
        }
        
        /* Tips */
        .tip-box {
            background: linear-gradient(135deg, #a8e6cf 0%, #88d8b0 100%);
            padding: 35px;
            border-radius: 15px;
            margin: 40px 0;
            border-left: 6px solid #27ae60;
        }
        
        .tip-title {
            font-size: 1.6em;
            font-weight: bold;
            color: #145a32;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .tip-content {
            color: #1d6d41;
            line-height: 1.9;
            font-size: 1.05em;
        }
        
        /* まとめ */
        .summary {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 50%, #f39c12 100%);
            color: white;
            padding: 50px;
            border-radius: 20px;
            text-align: center;
        }
        
        .summary h2 {
            font-size: 2.5em;
            margin-bottom: 30px;
        }
        
        .summary-content {
            max-width: 1100px;
            margin: 0 auto;
        }
        
        .summary-box {
            background: rgba(255,255,255,0.15);
            padding: 35px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            margin-bottom: 30px;
        }
        
        .summary-box h3 {
            font-size: 1.8em;
            margin-bottom: 15px;
        }
        
        .summary-box p {
            font-size: 1.15em;
            line-height: 2;
        }
        
        .summary-flow {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
            margin: 30px 0;
        }
        
        .summary-step {
            background: rgba(255,255,255,0.2);
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            min-width: 100px;
        }
        
        .summary-step-icon {
            font-size: 2em;
            margin-bottom: 8px;
        }
        
        .summary-arrow {
            font-size: 1.5em;
        }
        
        .summary-highlight {
            background: rgba(255,255,255,0.2);
            padding: 25px;
            border-radius: 12px;
            font-size: 1.2em;
            line-height: 1.8;
        }
        
        /* レスポンシブ */
        @media (max-width: 1024px) {
            .toc-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .pipeline-flow {
                flex-direction: column;
            }
            
            .stage-arrow {
                display: none;
            }
            
            .comparison-cards {
                grid-template-columns: 1fr;
            }
            
            .iam-grid,
            .monitoring-grid,
            .checklist-grid {
                grid-template-columns: 1fr;
            }
            
            .analogy-comparison {
                grid-template-columns: 1fr;
            }
            
            .analogy-equals {
                transform: rotate(90deg);
            }
            
            .rolling-config {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .header h1 {
                font-size: 2em;
            }
            
            .content {
                padding: 30px 20px;
            }
            
            .toc-grid {
                grid-template-columns: 1fr;
            }
            
            .phase-row {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .env-stages {
                flex-direction: column;
            }
            
            .env-arrow {
                transform: rotate(90deg);
            }
            
            .decision-branches {
                flex-direction: column;
                gap: 20px;
            }
            
            .analogy-mapping {
                grid-template-columns: 1fr;
            }
        }
    
        
        

        

        

        

        

        

        

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

        

        

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

        

        

        

        /* Mobile responsive */
        @media (max-width: 768px) {
            

            

            

            

            
        }

    
        
        

        

        

        

        

        

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