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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Sans JP', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
            color: #e2e8f0;
            line-height: 1.8;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* ヘッダー */
        .header {
            text-align: center;
            padding: 60px 20px;
            background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #dc2626 100%);
            border-radius: 24px;
            margin-bottom: 40px;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                rgba(255,255,255,0.03) 10px,
                rgba(255,255,255,0.03) 20px
            );
            animation: moveStripes 20s linear infinite;
        }
        
        @keyframes moveStripes {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }
        
        .header-content {
            position: relative;
            z-index: 1;
        }
        
        .header h1 {
            font-size: 2.8em;
            font-weight: 900;
            color: white;
            text-shadow: 2px 4px 8px rgba(0,0,0,0.3);
            margin-bottom: 15px;
        }
        
        .header-icon {
            font-size: 4em;
            margin-bottom: 20px;
            display: block;
        }
        
        .header p {
            font-size: 1.3em;
            color: rgba(255,255,255,0.95);
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 結論ファーストセクション */
        .conclusion-first {
            background: linear-gradient(135deg, #059669 0%, #10b981 100%);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 40px;
            position: relative;
        }
        
        .conclusion-first h2 {
            font-size: 1.8em;
            color: white;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .key-takeaway {
            background: rgba(255,255,255,0.15);
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
        }
        
        .key-takeaway h3 {
            color: #fef3c7;
            font-size: 1.3em;
            margin-bottom: 15px;
        }
        
        .key-takeaway p {
            color: white;
            font-size: 1.1em;
            line-height: 1.9;
        }
        
        .prefix-formula {
            background: rgba(0,0,0,0.3);
            border-radius: 12px;
            padding: 20px;
            font-family: 'Courier New', monospace;
            font-size: 1.1em;
            color: #4ade80;
            overflow-x: auto;
            margin-top: 15px;
        }
        
        /* たとえ話セクション */
        .analogy-section {
            background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
            border-radius: 20px;
            padding: 50px 40px;
            margin-bottom: 40px;
            position: relative;
        }
        
        .analogy-title {
            font-size: 2em;
            color: white;
            text-align: center;
            margin-bottom: 40px;
        }
        
        .analogy-container {
            display: grid;
            grid-template-columns: 1fr 80px 1fr;
            gap: 20px;
            align-items: center;
        }
        
        @media (max-width: 900px) {
            .analogy-container {
                grid-template-columns: 1fr;
            }
            .analogy-arrow {
                transform: rotate(90deg);
            }
        }
        
        .analogy-box {
            background: rgba(255,255,255,0.15);
            border-radius: 16px;
            padding: 30px;
            backdrop-filter: blur(10px);
        }
        
        .analogy-box h3 {
            font-size: 1.5em;
            color: #fef3c7;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .analogy-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
        
        .analogy-item:last-child {
            border-bottom: none;
        }
        
        .analogy-icon {
            font-size: 1.5em;
            min-width: 40px;
            text-align: center;
        }
        
        .analogy-text {
            color: white;
            font-size: 1.05em;
        }
        
        .analogy-arrow {
            font-size: 3em;
            color: white;
            text-align: center;
        }
        
        /* パス構造の図解 */
        .path-structure {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            border-radius: 20px;
            padding: 50px 40px;
            margin-bottom: 40px;
        }
        
        .path-structure h2 {
            font-size: 2em;
            color: white;
            text-align: center;
            margin-bottom: 40px;
        }
        
        .path-visual {
            background: rgba(0,0,0,0.3);
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .path-visual h3 {
            color: #93c5fd;
            font-size: 1.3em;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .path-breadcrumb {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .path-segment {
            padding: 12px 18px;
            border-radius: 10px;
            font-size: 0.95em;
            font-weight: 600;
            position: relative;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .path-segment:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }
        
        .segment-bucket { background: linear-gradient(135deg, #f97316, #ea580c); color: white; }
        .segment-prefix { background: linear-gradient(135deg, #84cc16, #65a30d); color: white; }
        .segment-awslogs { background: linear-gradient(135deg, #06b6d4, #0891b2); color: white; }
        .segment-orgid { background: linear-gradient(135deg, #d946ef, #c026d3); color: white; }
        .segment-account { background: linear-gradient(135deg, #f43f5e, #e11d48); color: white; }
        .segment-service { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; }
        .segment-region { background: linear-gradient(135deg, #eab308, #ca8a04); color: white; }
        .segment-date { background: linear-gradient(135deg, #14b8a6, #0d9488); color: white; }
        .segment-file { background: linear-gradient(135deg, #64748b, #475569); color: white; }
        
        .path-separator {
            color: #60a5fa;
            font-size: 1.5em;
            font-weight: bold;
        }
        
        .segment-description {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .desc-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 15px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
        }
        
        .desc-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            flex-shrink: 0;
            margin-top: 4px;
        }
        
        .desc-text {
            color: white;
            font-size: 0.95em;
            line-height: 1.6;
        }
        
        .desc-text strong {
            color: #93c5fd;
        }
        
        /* ファイル名の解説 */
        .filename-section {
            background: linear-gradient(135deg, #be185d 0%, #ec4899 100%);
            border-radius: 20px;
            padding: 50px 40px;
            margin-bottom: 40px;
        }
        
        .filename-section h2 {
            font-size: 2em;
            color: white;
            text-align: center;
            margin-bottom: 40px;
        }
        
        .filename-breakdown {
            background: rgba(0,0,0,0.3);
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .filename-example {
            font-family: 'Courier New', monospace;
            font-size: 1em;
            color: #fbcfe8;
            background: rgba(0,0,0,0.4);
            padding: 20px;
            border-radius: 10px;
            overflow-x: auto;
            white-space: nowrap;
            margin-bottom: 25px;
        }
        
        .filename-parts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .filename-part {
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }
        
        .filename-part-icon {
            font-size: 2em;
            margin-bottom: 10px;
        }
        
        .filename-part-label {
            color: #fce7f3;
            font-size: 0.9em;
            margin-bottom: 5px;
        }
        
        .filename-part-value {
            color: white;
            font-size: 1.1em;
            font-weight: 600;
            font-family: 'Courier New', monospace;
        }
        
        /* イベントタイプ別パス */
        .event-types {
            background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
            border-radius: 20px;
            padding: 50px 40px;
            margin-bottom: 40px;
        }
        
        .event-types h2 {
            font-size: 2em;
            color: white;
            text-align: center;
            margin-bottom: 40px;
        }
        
        .event-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
        }
        
        .event-card {
            background: rgba(255,255,255,0.15);
            border-radius: 16px;
            padding: 25px;
            backdrop-filter: blur(10px);
            transition: transform 0.3s;
        }
        
        .event-card:hover {
            transform: translateY(-5px);
        }
        
        .event-card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .event-card-icon {
            font-size: 2.5em;
        }
        
        .event-card-title {
            color: white;
            font-size: 1.3em;
            font-weight: 700;
        }
        
        .event-card-subtitle {
            color: #99f6e4;
            font-size: 0.9em;
        }
        
        .event-card-path {
            background: rgba(0,0,0,0.3);
            border-radius: 8px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 0.85em;
            color: #5eead4;
            overflow-x: auto;
            margin-bottom: 15px;
        }
        
        .event-card-desc {
            color: white;
            font-size: 0.95em;
            line-height: 1.7;
        }
        
        /* 実践例 */
        .practical-section {
            background: linear-gradient(135deg, #92400e 0%, #d97706 100%);
            border-radius: 20px;
            padding: 50px 40px;
            margin-bottom: 40px;
        }
        
        .practical-section h2 {
            font-size: 2em;
            color: white;
            text-align: center;
            margin-bottom: 40px;
        }
        
        .scenario-box {
            background: rgba(255,255,255,0.15);
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 25px;
        }
        
        .scenario-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .scenario-icon {
            font-size: 2.5em;
        }
        
        .scenario-title {
            color: white;
            font-size: 1.4em;
            font-weight: 700;
        }
        
        .scenario-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        @media (max-width: 768px) {
            .scenario-content {
                grid-template-columns: 1fr;
            }
        }
        
        .scenario-input, .scenario-output {
            background: rgba(0,0,0,0.2);
            border-radius: 12px;
            padding: 20px;
        }
        
        .scenario-input h4, .scenario-output h4 {
            color: #fef3c7;
            margin-bottom: 15px;
            font-size: 1.1em;
        }
        
        .scenario-input ul {
            list-style: none;
            color: white;
        }
        
        .scenario-input li {
            padding: 8px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .scenario-output pre {
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            color: #fde68a;
            white-space: pre-wrap;
            word-break: break-all;
            line-height: 1.6;
        }
        
        /* AWS CLI コマンド */
        .cli-section {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border-radius: 20px;
            padding: 50px 40px;
            margin-bottom: 40px;
            border: 2px solid #475569;
        }
        
        .cli-section h2 {
            font-size: 2em;
            color: #f8fafc;
            text-align: center;
            margin-bottom: 40px;
        }
        
        .cli-command {
            background: #0f172a;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 25px;
            border-left: 4px solid #3b82f6;
        }
        
        .cli-command h4 {
            color: #93c5fd;
            margin-bottom: 15px;
            font-size: 1.1em;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .cli-code {
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            color: #4ade80;
            background: rgba(0,0,0,0.5);
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            margin-bottom: 15px;
        }
        
        .cli-desc {
            color: #cbd5e1;
            font-size: 0.95em;
            line-height: 1.7;
        }
        
        /* FAQ */
        .faq-section {
            background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
            border-radius: 20px;
            padding: 50px 40px;
            margin-bottom: 40px;
        }
        
        .faq-section h2 {
            font-size: 2em;
            color: white;
            text-align: center;
            margin-bottom: 40px;
        }
        
        .faq-item {
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        
        .faq-item:hover {
            transform: translateX(5px);
        }
        
        .faq-question {
            color: #c7d2fe;
            font-size: 1.15em;
            font-weight: 700;
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        
        .faq-question::before {
            content: 'Q';
            background: #fbbf24;
            color: #1e293b;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            flex-shrink: 0;
        }
        
        .faq-answer {
            color: white;
            font-size: 1em;
            line-height: 1.8;
            padding-left: 40px;
        }
        
        .faq-answer code {
            background: rgba(0,0,0,0.3);
            padding: 3px 8px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            color: #a5f3fc;
        }
        
        /* まとめ */
        .summary {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #dc2626 100%);
            border-radius: 20px;
            padding: 50px 40px;
            text-align: center;
        }
        
        .summary h2 {
            font-size: 2.2em;
            color: white;
            margin-bottom: 30px;
        }
        
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 35px;
        }
        
        .summary-card {
            background: rgba(255,255,255,0.2);
            border-radius: 16px;
            padding: 25px;
            backdrop-filter: blur(10px);
        }
        
        .summary-card-icon {
            font-size: 3em;
            margin-bottom: 15px;
        }
        
        .summary-card-title {
            color: white;
            font-size: 1.2em;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .summary-card-text {
            color: rgba(255,255,255,0.9);
            font-size: 0.95em;
            line-height: 1.7;
        }
        
        .summary-message {
            background: rgba(255,255,255,0.2);
            border-radius: 12px;
            padding: 25px;
            color: white;
            font-size: 1.2em;
            line-height: 1.9;
        }
        
        /* フッター */
        .footer {
            text-align: center;
            padding: 30px;
            color: #64748b;
            font-size: 0.9em;
        }
    
    
    

    

    

    

    

    

    

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

    

    

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

    

    

    

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