/* --- 手のひらの、寄り道ラジオ：プレミアム・グラデーションVer --- */

/* 1. 全体の背景設定 */
body, #container, .site-main {
    background-color: #1A2A44 !important;
    color: #FCFCFC !important;
}

/* 2. 記事エリアの背景（透過させて奥行きを出す） */
#main, .main, .article, .entry-content {
    background-color: transparent !important; /* 背景に馴染ませる */
    border: none !important;
}

/* 3. H2見出し：夜空のグラデーションと光のライン */
.article h2 {
    /* 左から右へ、深い紺から少し明るい紺へのグラデーション */
    background: linear-gradient(135deg, #1A2A44 0%, #2C3E50 100%) !important;
    color: #FCFCFC !important;
    /* 左側のゴールド線を「光っている」ように見せる */
    border-left: 6px solid #D4AF37 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5); /* 影をつけて立体的に */
    padding: 18px 25px !important;
    margin-top: 50px !important;
    border-radius: 0 15px 15px 0;
    font-weight: bold;
}

/* 4. H3見出し：消えていくゴールドの下線 */
.article h3 {
    color: #D4AF37 !important;
    background: none !important;
    border: none !important;
    /* 下線を左から右へ「スーッ」と消えるグラデーションに */
    border-bottom: 2px solid !important;
    border-image: linear-gradient(to right, #D4AF37 0%, rgba(212, 175, 55, 0) 100%) 1 !important;
    padding-bottom: 8px !important;
    margin-top: 45px !important;
    font-weight: bold;
}

/* 5. 記事カード（トップページ）：浮かび上がるようなグラデーション */
.entry-card-wrap {
    background: linear-gradient(145deg, #1e2f4d, #17253d) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 10px !important;
    transition: 0.3s;
}

.entry-card-wrap:hover {
    transform: translateY(-5px); /* マウスを乗せると少し浮く */
    border-color: #D4AF37 !important;
}

/* 6. 本文の文字を読みやすく調整 */
.entry-content {
    font-size: 18.5px !important;
    line-height: 2.0 !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em; /* 文字の間隔を少し広げて読みやすく */
}

/* 7. リンク：金色の光の演出 */
a {
    color: #D4AF37 !important;
    transition: 0.3s;
    text-decoration: underline dotted; /* 点線の下線でおしゃれに */
}

a:hover {
    color: #FFD700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); /* ぼんやり光る */
    text-decoration: none;
}
/* --- カルーセル（おすすめ記事スライダー）のアクセント設定 --- */

/* 1. カルーセル全体の背景色 */
.carousel-area, .carousel-in {
    background-color: #003060 !important;
    border-bottom: 2px solid #D4AF37 !important; /* 下にゴールドの線を入れて引き締める */
}

/* 2. カルーセル内の記事タイトル文字色 */
.carousel-entry-title {
    color: #FCFCFC !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* 文字を浮かび上がらせる */
}

/* 3. カルーセルの左右の矢印ボタンの色 */
.slick-prev:before, .slick-next:before {
    color: #D4AF37 !important; /* 矢印をゴールドに */
    opacity: 1 !important;
}

/* 4. カルーセルの下にあるドット（ページ送り）の色 */
.slick-dots li button:before {
    color: #FCFCFC !important;
    opacity: 0.3;
}

.slick-dots li.slick-active button:before {
    color: #D4AF37 !important; /* アクティブなドットをゴールドに */
    opacity: 1;
}

/* 5. カルーセル内のカテゴリーラベル */
.carousel-entry-card .cat-label {
    background-color: #D4AF37 !important; /* カテゴリをゴールドに */
    color: #1A2A44 !important; /* 文字は紺色で読みやすく */
}
/* --- 記事内のリスト（箇条書き）のデザイン修正 --- */

/* 1. 箇条書き（黒丸）と番号付きリスト共通の設定 */
.article ul, .article ol {
    background-color: #003060 !important; /* カルーセルと同じアクセントカラー */
    border: 1px solid rgba(212, 175, 55, 0.4) !important; /* ほのかなゴールドの枠線 */
    border-left: 5px solid #D4AF37 !important; /* 左側に太いゴールドの線 */
    padding: 20px 20px 20px 40px !important;
    margin: 30px 0 !important;
    border-radius: 5px;
    color: #FCFCFC !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* 軽い影で浮かび上がらせる */
}

/* 2. リスト内の文字の太さ調整 */
.article ul li, .article ol li {
    line-height: 1.8 !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

/* 3. 箇条書きの「点（・）」をゴールドにする */
.article ul li::marker {
    color: #D4AF37 !important;
    font-size: 1.2em;
}

/* 4. 番号付きリストの「数字」をゴールドにする */
.article ol li::marker {
    color: #D4AF37 !important;
    font-weight: bold;
}
/* --- 背景に星を散りばめる演出（全体・ゆっくり動くバージョン） --- */

/* 1. サイト全体の背景に動く星空を作る */
body {
    background-color: #1A2A44 !important;
    /* 異なるサイズ・明るさの星を複数レイヤーで作成 */
    background-image: 
        radial-gradient(1px 1px at 25px 35px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 90px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 80px 180px, #dddddd, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 120px 60px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 170px 110px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 220px 240px, #dddddd, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 350px 350px; /* 星の密度を少し下げて上品に */

    /* 【ここがポイント】星空をゆっくりと斜めに動かす */
    animation: star-drift 120s linear infinite;
}

/* 2. 星がゆっくりと斜めに流れるアニメーション */
@keyframes star-drift {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 350px 700px; /* ゆっくりと移動させる */
    }
}

/* 3. 中央のコンテンツエリアを透明にして星を見せる */
#container, #main, .main, .article, .entry-content, #header, #footer, .sidebar {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. 文字の後ろにうっすら影をつけて読みやすくする */
.entry-content, .article-title, .site-name-text {
    text-shadow: 2px 2px 4px rgba(26, 42, 68, 0.9);
}

/* 5. モバイルでの背景固定を解除（動作を軽くするため） */
@media screen and (max-width: 480px) {
    body {
        animation: star-drift 150s linear infinite; /* スマホではさらにゆっくり */
    }
}
/* --- 記事下のカテゴリー・タグリンクの修正 --- */

/* 1. カテゴリーラベル自体のデザイン修正 */
.entry-categories a, .entry-tags a, .category-link {
    background-color: #D4AF37 !important; /* 背景をゴールドに */
    color: #1A2A44 !important; /* 文字を深い紺色にしてコントラストを出す */
    border: none !important;
    text-decoration: none !important; /* 下線を消す */
    font-weight: bold !important;
    padding: 5px 12px !important;
    border-radius: 20px !important; /* 角丸にしてバッジ風に */
    display: inline-block !important;
    margin-bottom: 5px !important;
    font-size: 0.8em !important;
    transition: 0.3s;
}

/* 2. マウスを乗せた時の色の反転（ホバー） */
.entry-categories a:hover, .entry-tags a:hover {
    background-color: #FCFCFC !important; /* 背景を白に */
    color: #1A2A44 !important; /* 文字は紺のまま */
    transform: scale(1.05); /* 少しだけ大きくする */
}

/* 3. ラベル内の「フォルダアイコン」などの色調整 */
.entry-categories a span, .entry-tags a span {
    color: #1A2A44 !important;
}

/* 4. 念のため、先ほど設定した「u（下線）」がここに干渉しないようにする */
.entry-categories a u, .entry-tags a u {
    background: none !important;
    text-decoration: none !important;
}
/* --- 記事内の太字をゴールドにする --- */
.entry-content strong, 
.entry-content b {
    color: #D4AF37 !important; /* サイトのキーカラー（金） */
    font-weight: bold !important; /* しっかり太くする */
}
/* --- 関連記事カードを深夜の放送室風にする --- */

/* 関連記事全体のタイトル（「関連記事」の文字） */
.related-entry-heading {
    color: #D4AF37 !important;
    border-bottom: 2px solid #D4AF37 !important;
    font-size: 1.2em !important;
    margin-bottom: 20px !important;
}

/* 関連記事カードの枠と背景 */
.related-entry-card {
    background-color: #2C3E50 !important; /* 少し明るい紺色 */
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    transition: 0.3s;
}

/* カードにマウスを乗せた時の動き */
.related-entry-card:hover {
    background-color: #34495E !important;
    border-color: #D4AF37 !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* カード内のタイトル文字色 */
.related-entry-card-title {
    color: #FCFCFC !important;
    font-weight: bold !important;
    font-size: 0.9em !important;
}