/* カスタムスタイル追加用 */

/* アニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* スクロール時のアニメーション */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ローディングアニメーション */
.loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 追加のレスポンシブ調整 */
@media (max-width: 1024px) {
    .content-section {
        padding: 80px 20px;
    }
    
    .section-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .hero-catchphrase {
        font-size: 24px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
        .album-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    
    .social-links {
        gap: 20px;
    }
    
    .social-link {
        width: 40px;
        height: 40px;
    }
}

/* プリントスタイル */
@media print {
    .site-header,
    .scroll-to-top,
    .site-footer {
        display: none;
    }
}