* { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: #333; background: #fdfdfd; }
    #wrapper { max-width: 1000px; margin: 0 auto; padding: 0 15px; }
    
    /* Layout */
    #header { padding: 20px 0; border-bottom: 2px solid #bf3a00; }
    .logo img { max-width: 280px; height: auto; }
    #contents { display: flex; flex-wrap: wrap; padding: 20px 0; gap: 20px; }
    #main { flex: 3; min-width: 300px; }
    #left { flex: 1; min-width: 240px; }
    
    /* Typography & UI */
    h3 { color: #bf3a00; margin-bottom: 15px; border-bottom: 1px dotted #ccc; padding-bottom: 5px; }
    .introduction { background: #f9f9f9; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
    
    /* Images */
    .hero-img { width: 100%; height: 300px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    
    /* Navigation */
    .side-navi ul { list-style: none; }
    .side-navi li { margin-bottom: 10px; }
    .side-navi img { display: block; max-width: 100%; height: auto; transition: opacity 0.3s; }
    .side-navi a:hover img { opacity: 0.8; }
    
    /* Footer */
    #footer { border-top: 2px solid #333; padding: 30px 0; margin-top: 30px; text-align: center; }
    .shopinfo { margin-bottom: 20px; }
    
    /* Utilities */
    .aovr:hover { opacity: 0.7; }
    .clearfix::after { content: ""; display: table; clear: both; }

    /* Responsive */
    @media (max-width: 768px) {
        #contents { flex-direction: column; }
        #main, #left { width: 100%; }
    }