@charset "UTF-8";
/* SVG教室テキストのスタイル */
            .room-text {
                cursor: pointer;
                transition: fill 0.3s ease;
            }
            
            .room-text:hover {
                fill: #0066cc;
            }
            
            /* モーダルスタイル */
            .classroom-modal {
                display: none;
                position: fixed;
                z-index: 10000;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.85);
                animation: fadeIn 0.3s ease;
            }
            
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            
            .classroom-modal-content {
                position: relative;
                margin: 3% auto;
                max-width: 90%;
                max-height: 90%;
                animation: slideDown 0.3s ease;
            }
            
            @keyframes slideDown {
                from {
                    transform: translateY(-50px);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
            
            .classroom-modal-image {
                width: 100%;
                height: auto;
                border-radius: 8px 8px 0 0;
                max-height: 70vh;
                object-fit: contain;
                background-color: #222;
            }
            
            .classroom-modal-caption {
                background-color: white;
                padding: 20px;
                text-align: center;
                border-radius: 0 0 8px 8px;
            }
            
            .classroom-modal-caption h3 {
                margin: 0 0 10px 0;
                color: #333;
                font-size: 24px;
            }
            
            .classroom-modal-caption p {
                margin: 0;
                color: #666;
                font-size: 16px;
                line-height: 1.6;
            }
            
            .classroom-modal-close {
                position: absolute;
                top: -45px;
                right: 0;
                color: white;
                font-size: 45px;
                font-weight: bold;
                cursor: pointer;
                background: none;
                border: none;
                padding: 0;
                width: 45px;
                height: 45px;
                line-height: 45px;
                text-align: center;
                transition: transform 0.2s ease;
            }
            
            .classroom-modal-close:hover {
                transform: scale(1.2);
            }
            
            @media (max-width: 768px) {
                .classroom-modal-content {
                    margin: 10% auto;
                    max-width: 95%;
                }
                
                .classroom-modal-caption h3 {
                    font-size: 20px;
                }
                
                .classroom-modal-caption p {
                    font-size: 14px;
                }
            }