/* ------------------------------------------------ */
/* リンク先要素のハイライトスタイル */
/* ------------------------------------------------ */

/* 点滅アニメーションの定義 */
/* 枠線の太さと影を周期的に変化させます */
@keyframes blink-highlight {
    0% {
        border-left-width: 8px; /* 開始時の太い枠線（以前の5pxから変更） */
        box-shadow: 0 0 10px rgba(200, 100, 0, 0.7); /* 濃い影が濃い状態 */
    }
    50% {
        border-left-width: 12px; /* 最も太い枠線（以前の8pxから変更） */
        box-shadow: 0 0 18px rgba(200, 100, 0, 1); /* 影が最も濃い状態 */
    }
    100% {
        border-left-width: 8px; /* 開始時の太さに戻る */
        box-shadow: 0 0 10px rgba(200, 100, 0, 0.7);
    }
}

/* 通常時の見出しのスタイル (既存のスタイルから調整) */
.topic-section {
    padding: 5px 10px; 
    margin: 20px 0 10px 0;
    border-left-style: solid; 
    border-left-width: 5px; /* 標準の枠線の太さ */
    border-left-color: #0055a4; /* 通常の青系の枠線 */
    background-color: #f0f0f0; 
    transition: all 0.5s ease-in-out; 
}

/* リンクされたとき、またはJavaScriptでクラスが付与されたときのスタイル */
.topic-section:target,
.topic-section.is-highlighted { 
    background-color: #fffde7 !important; /* 目立つ薄い黄色 */
    border-left-color: #cc6600 !important; /* ★変更: 濃いオレンジ色 */
    
    /* 点滅アニメーションを適用 */
    animation: blink-highlight 1s 5; /* 1秒の速さで5回点滅する */
    
    /* アニメーション中は transition の影響を打ち消すために!importantを維持 */
    /* 初期の影も濃い色に設定 */
    box-shadow: 0 0 10px rgba(200, 100, 0, 0.7) !important; 
}