@charset "utf-8";

/* ==========================================
   全ページ共通レスポンシブ（768px以下）
   ========================================== */
@media (max-width: 768px) {

    /* --- 1. 全体：横揺れ・はみ出しを物理的にカット --- */
    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;
    }

    /* --- 2. 登場人物ロゴ--- */
    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; }

    /* --- 3. TOPページ：タイムライン (index.html) --- */
    .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; }

   

/*--スロット--*/

@media (max-width: 768px) {
    #slot-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
        gap: 15px !important;
    }
    .ad-box { 
        width: 100% !important; 
        min-height: 100px !important; 
        order: 2;
    }
    .slot-box { 
        width: 100% !important; 
        min-width: 0 !important; 
        order: 1;
        padding: 0 !important;
    }
    .slot {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 4px !important;
    }
    .reel {
        width: 32% !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    .reel-window {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

      .reel-strip img {
        width: 100% !important;
        height: 100.5% !important; 
        display: block !important;
        object-fit: cover !important;
        transform: translateY(-0.1px); 
    }
}

   
    /* ボタンの光沢とサイズ調整 */
    button {
        padding: 12px 2px !important;
        font-size: 0.65rem !important; 
        width: 100% !important;
        letter-spacing: -1px;
        box-shadow: 0 0 10px rgba(0, 191, 255, 0.4), inset 0 1px 5px rgba(255, 255, 255, 0.3) !important;
    }
    .control button {
        width: 45% !important;
        font-size: 1rem !important;
    }
    #score {
        margin-top: 30px !important; 
        font-size: 1.5rem !important;
    }

    /* --- 5. キャラスライダー (cha.html) --- */
    .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;
    }

    /* --- 6. 番外編・地図 (an-novel/map.html) --- */
    .novel-grid, .map-grid { display: block !important; }
    .novel-card, .map-card { width: 90% !important; margin: 0 auto 30px !important; }

    /* --- 7. フッター --- */
    .footer-container { flex-direction: column !important; text-align: center !important; }
    .footer-left, .footer-right { width: 100% !important; margin-bottom: 30px; }
}