@charset "utf-8";

@media (max-width: 768px) {

    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    main, .right-scroll-area main, #right-scroll-area main {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .content-box {
        margin-top: 0 !important;
        padding: 20px 10px !important;
        width: 100% !important;
    }

    a[style*="position:absolute"][href="index.html"] {
        position: relative !important;
        display: block !important;
        margin: 20px auto !important;
        text-align: center;
        left: 0 !important;
        top: 0 !important;
    }
    a[href="index.html"] img { width: 220px !important; }

    .timeline-container { overflow: hidden; }
    .timeline-line { left: 25px !important; }
    .timeline-item {
        width: calc(100% - 50px) !important;
        margin-left: 40px !important;
        transform: translateY(20px) !important; 
        text-align: left !important;
    }
    .timeline-item.is-active { transform: translateY(0) !important; }
    .timeline-dot { left: -25px !important; right: auto !important; }

    .img-wrapper { flex-direction: column !important; align-items: center !important; }
    .slider-arrow { 
        position: relative !important; 
        top: 0 !important; 
        width: 45% !important; 
        margin: 10px 2% !important;
    }

    .novel-grid, .map-grid { display: block !important; }
    .novel-card, .map-card { width: 90% !important; margin: 0 auto 30px !important; }

    .footer-container { flex-direction: column !important; text-align: center !important; }
    .footer-left, .footer-right { width: 100% !important; margin-bottom: 30px; }
}