.instructions {
    font-family: 'Arial', sans-serif;
    background-color: #f0f8ff;
    color: #333;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    
    h1 {
        text-align: center;
        color: #4a90e2;
        font-size: 2em;
        margin-bottom: 20px;
    }
    details {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    summary {
        padding: 15px;
        background-color: #e0f7fa;
        cursor: pointer;
        font-weight: bold;
        display: flex;
        align-items: center;
        font-size: 1.1em;
    }
    summary::before {
        content: '▶ ';
        margin-right: 10px;
        transition: transform 0.3s;
    }
    details[open] summary::before {
        transform: rotate(90deg);
    }
    .content {
        padding: 20px;
    }
    /* 左右レイアウト */
    .layout-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 左右50%ずつ */
        gap: 20px;
        align-items: start;
    }
    .screenshot {
        text-align: center;
    }
    .screenshot img {
        max-width: 100%;
        height: auto;
        border: 2px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    .description ul {
        margin-left: 20px;
    }
    .description strong {
        color: #4a90e2;
    }

    /* スマホ対応：画面幅600px以下で縦並び */
    @media (max-width: 600px) {
        .layout-grid {
            grid-template-columns: 1fr;
        }
        .screenshot {
            order: -1; /* 画像を上に持ってくる */
        }
    }
}