/* Lazy Loading CSS with Loading Animation */

/* 画像コンテナのベーススタイル */
.lazy-load-container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* ローディングアニメーション */
.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    z-index: 10;
}

.loading-spinner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(232, 86, 155, 0.3);
    border-radius: 50%;
    border-top: 3px solid #e8569b;
    animation: spin 1s linear infinite;
}

/* スピンアニメーション */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ローディング中の背景 */
.lazy-load-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    transition: opacity 0.3s ease;
}

/* 画像の初期状態（非表示） */
.lazy-image {
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 100%;
    height: auto;
    display: block;
}

/* 画像ロード完了時 */
.lazy-image.loaded {
    opacity: 1;
}

/* 動画の初期状態（非表示） */
.lazy-video {
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 100%;
    height: auto;
    display: block;
}

/* 動画ロード完了時 */
.lazy-video.loaded {
    opacity: 1;
}

/* 動画コンテナの特別なサイズ設定 */
.video-content .lazy-load-container {
    min-height: 200px;
    background: #000;
    border-radius: 4px;
}

/* 動画用ローディングスピナー */
.video-content .loading-spinner::before {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #fff;
}

/* プレースホルダーの非表示 */
.lazy-load-placeholder.hidden {
    opacity: 0;
    pointer-events: none;
}

/* サイドバーバナー用の特別なサイズ設定 */
.sidebar-banner-item-unique .lazy-load-container {
    min-height: 100px;
    background: #f8f9fa;
    border-radius: 4px;
}

.sidebar-credit-banner-unique .lazy-load-container {
    min-height: 120px;
    background: #f8f9fa;
    border-radius: 4px;
}

/* モバイル用の調整 */
@media (max-width: 767px) {
    .sidebar-banner-item-unique .lazy-load-container {
        min-height: 80px;
    }

    .loading-spinner {
        width: 24px;
        height: 24px;
    }

    .loading-spinner::before {
        border-width: 2px;
    }
}

/* フェードイン効果 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}