:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --text-color: #333333;
    --link-color: #0056b3;
    --header-bg-color: #ffffff;
    --button-bg-color: #007bff;
    --button-text-color: #ffffff;
}

.site-header {
    background: var(--header-bg-color) !important;
}

.btn-watch, .btn-submit, .btn-save {
    background: linear-gradient(45deg, var(--primary-color), var(--link-color)) !important;
}

/* ナビゲーションリンク */
.site-nav a {
    color: var(--text-color) !important;
}

.site-nav a:hover, .site-nav a.active {
    color: var(--primary-color) !important;
}

/* 通常のリンク色（ボタン・カテゴリ・ナビ内は除外） */
a:not(.btn):not(.btn-watch):not(.btn-share):not(.btn-back):not(.hero-cta-btn):not([class*="btn-"]):not(.category-item):not(.sort-item):not(.tag-item):not(.site-nav a):not(.video-card) {
    color: var(--link-color) !important;
}

a:not(.btn):not(.btn-watch):not(.btn-share):not(.btn-back):not(.hero-cta-btn):not([class*="btn-"]):not(.category-item):not(.sort-item):not(.tag-item):not(.site-nav a):not(.video-card):hover {
    color: var(--primary-color) !important;
}

/* カテゴリ・並び順・タグのリンク色（テキストカラーを使用） */
.category-item, .sort-item, .tag-item {
    color: var(--text-color) !important;
}

.category-item:hover, .sort-item:hover, .tag-item:hover {
    color: var(--text-color) !important;
}

/* アクティブ状態は白文字 */
.category-item.active, .sort-item.active {
    color: white !important;
}

/* ボタン内のリンクは設定の文字色を適用（より強力なセレクタ） */
/* ※.sort-buttons内の.btn、.btn-backは除外 */
.btn-watch, .btn-copy, .btn-submit, .btn-save,
.btn-watch a, .btn-share a,
a.btn-watch, a.btn-share,
button[class*="btn"]:not(.sort-buttons .btn), .share-buttons a:not(.btn-copy) {
    color: var(--button-text-color) !important;
}

/* 並び順ボタンはテキストカラーを使用 */
.sort-buttons .btn {
    color: var(--text-color) !important;
}

.sort-buttons .btn.active {
    color: white !important;
}

/* ボタン背景色も設定を適用 */
.btn-watch {
    background: var(--button-bg-color) !important;
    color: var(--button-text-color) !important;
}

/* シェアボタン */
.btn-share {
    color: var(--button-text-color) !important;
}

.btn-share:hover {
    color: var(--button-text-color) !important;
}

/* 戻るボタン・コピーボタンはテキストカラー */
.btn-back, .btn-copy {
    color: var(--text-color) !important;
}

.btn-back:hover {
    color: var(--primary-color) !important;
}

body {
    color: var(--text-color) !important;
}

.video-card:hover {
    border-color: var(--primary-color) !important;
}

/* ヒーローセクション */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    background:         linear-gradient(135deg, #000000, #6b6b6b);
    ;
    color: white;
    position: relative;
    overflow: hidden;
    min-height: 350px;}


.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-title {
    font-size: 48px;
    font-weight: bold;
    margin: 0 0 20px 0;
    text-shadow: 3px 3px 8px rgba(0,0,0,0.7);
    animation: heroTitleSlide 1.2s ease-out;}

.hero-subtitle {
    font-size: 20px;
    margin: 0;
    opacity: 0.95;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    animation: heroSubtitleSlide 1.2s ease-out 0.3s backwards;}

/* タイトルアニメーション */
@keyframes heroTitleFade {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroTitleSlide {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes heroTitleZoom {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes heroTitleBounce {
    0% { transform: translateY(-80px); opacity: 0; }
    60% { transform: translateY(15px); opacity: 1; }
    80% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

@keyframes heroTitleRotate {
    from { transform: rotate(10deg) translateY(-40px); opacity: 0; }
    to { transform: rotate(0deg) translateY(0); opacity: 1; }
}

@keyframes heroTitleBlur {
    from { filter: blur(30px); opacity: 0; transform: scale(1.2); }
    to { filter: blur(0); opacity: 1; transform: scale(1); }
}

@keyframes heroTitleWave {
    0% { transform: translateY(-40px); opacity: 0; }
    25% { transform: translateY(10px); opacity: 0.5; }
    50% { transform: translateY(-5px); opacity: 0.8; }
    75% { transform: translateY(2px); opacity: 0.9; }
    100% { transform: translateY(0); opacity: 1; }
}

/* サブタイトルアニメーション */
@keyframes heroSubtitleFade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 0.95; transform: translateY(0); }
}

@keyframes heroSubtitleSlide {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 0.95; }
}

@keyframes heroSubtitleZoom {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 0.95; }
}

@keyframes heroSubtitleBounce {
    0% { transform: translateY(60px); opacity: 0; }
    60% { transform: translateY(-10px); opacity: 1; }
    80% { transform: translateY(5px); }
    100% { transform: translateY(0); opacity: 0.95; }
}

@keyframes heroSubtitleRotate {
    from { transform: rotate(-10deg) translateY(30px); opacity: 0; }
    to { transform: rotate(0deg) translateY(0); opacity: 0.95; }
}

@keyframes heroSubtitleBlur {
    from { filter: blur(20px); opacity: 0; transform: translateY(20px); }
    to { filter: blur(0); opacity: 0.95; transform: translateY(0); }
}

@keyframes heroSubtitleWave {
    0% { transform: translateY(30px); opacity: 0; }
    25% { transform: translateY(-8px); opacity: 0.5; }
    50% { transform: translateY(4px); opacity: 0.8; }
    75% { transform: translateY(-2px); opacity: 0.9; }
    100% { transform: translateY(0); opacity: 0.95; }
}

@media (max-width: 768px) {
    .hero-title { font-size: 32px; }
    .hero-subtitle { font-size: 16px; }
    .hero-section { padding: 40px 20px; }
}