/* アナログ時計の表示エリアのスタイル（親要素） */
#analog-clock-area {
    /* 既存のスタイル */
    width: 200px; /* 例: 時計の固定サイズを指定 */
    height: 200px; /* 例: 時計の固定サイズを指定 */
    position: relative;

    /* 💡 中央寄せの対策 */
    /* block要素として振る舞わせる（flexの子要素でも中央寄せしやすくする） */
    display: block;

    /* 左右のmarginをautoにすることで、親要素の中心に配置 */
    margin-left: auto;
    margin-right: auto;

    /* 必要であれば、上下のスペースも調整 */
    margin-top: 5px;
    margin-bottom: 5px;
}
.clock-container {
    /* ここで時計のサイズを指定します */
    width: 200px; /* 時計の幅 */
    height: 200px; /* 時計の高さ */
    /* ↓ サンプルとして中央に配置していますが、好きな位置に配置できます */
    margin: 10px auto;
    border: 5px solid #333; /* 時計の枠 */
    border-radius: 50%; /* 円形にする */
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* 文字盤全体（針の回転の中心となる要素） */
.clock-face {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 針の共通スタイル */
.hour-hand,
.minute-hand,
.second-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 回転の中心を針の根元（時計の中心）にする */
    transform-origin: 0% 0%; 
    /* 初期位置（12時の方向）から回転させるため、Y軸方向にずらしておく */
    transform: rotate(0deg) translate(-50%, -100%); 
    z-index: 10;
}

/* 時針のスタイル */
.hour-hand {
    width: 6px;
    height: 30%; /* 時計の半径に対する長さ */
    background-color: #333;
    /* 針の先端を丸める */
    border-radius: 3px 3px 0 0; 
}

/* 分針のスタイル */
.minute-hand {
    width: 4px;
    height: 40%; /* 時計の半径に対する長さ */
    background-color: #555;
    /* 針の先端を丸める */
    border-radius: 2px 2px 0 0;
}

/* 秒針のスタイル */
.second-hand {
    width: 2px;
    height: 45%; /* 時計の半径に対する長さ */
    background-color: #f00;
    /* 針の先端を丸める */
    border-radius: 1px 1px 0 0;
    z-index: 20;
}

/* 中心点のスタイル */
.center-dot {
    width: 15px;
    height: 15px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    /* 要素の中心が親の中心に来るように調整 */
    transform: translate(-50%, -50%); 
    z-index: 30;
}
.clock-background-image {
    position: absolute; /* 親要素 (.clock-container) を基準に配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 💡 最重要: 針よりも奥に画像を配置 (針は通常 z-index: 10以上) */
    z-index: 1;

    /* 画像をコンテナに合わせて調整 */
    object-fit: cover;
    border-radius: 50%; /* 親要素が円形なら画像も円形に */
}
.clock-background-image {
    position: absolute; /* 親要素 (.clock-container) を基準に配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 💡 最重要: 針よりも奥に画像を配置 (針は通常 z-index: 10以上) */
    z-index: 1;

    /* 画像をコンテナに合わせて調整 */
    object-fit: cover;
    border-radius: 50%; /* 親要素が円形なら画像も円形に */
}
/* 1. マウスが乗った時に「触れる」ことを示す */
.slideshow-container:hover {
    cursor: pointer;
}

/* 2. アクティブなスライドのベース設定（アニメーションを滑らかにする） */
.slide-item.active .point_area {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 2px solid transparent; /* ガタつき防止の透明枠線 */
}

/* 3. マウスホバー時の「極端すぎず、かつ明確な」変化 */
.slideshow-container:hover .slide-item.active .point_area {
    /* 背景色を少し濃くして、文字とのコントラストを強める */
    background-color: #f0f8ff; /* 淡い青（アリスブルー）で「選択中」を演出 */

    /* 枠線をはっきり出す（サイトのアクセントカラーに合わせて変えてください） */
    border: 2px solid #0056b3;

    /* 影を深くして、物理的に浮き上がっているように見せる */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

    /* わずかに拡大（1.03倍） */
    transform: translateY(-5px) scale(1.03);
}

/* 4. 停止中、時計のエリアだけ「動いている」ことを強調するために少し明るくする */
.slideshow-container:hover .slide-item.active .analog-clock-area {
    filter: drop-shadow(0 0 8px rgba(0, 86, 179, 0.3));
    background-color: #ffffff;
    border-radius: 50%;
}

/* 5. 地点名（city）を少し強調して「今ここを見ている」と認識させる */
.slideshow-container:hover .slide-item.active .city {
    color: #0056b3;
    font-weight: bold;
    transform: scale(1.1);
    transition: all 0.3s ease;
}/* 1. マウスが乗った時に「触れる」ことを示す */
.slideshow-container:hover {
    cursor: pointer;
}

/* 2. アクティブなスライドのベース設定（アニメーションを滑らかにする） */
.slide-item.active .point_area {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 2px solid transparent; /* ガタつき防止の透明枠線 */
}

/* 3. マウスホバー時の「極端すぎず、かつ明確な」変化 */
.slideshow-container:hover .slide-item.active .point_area {
    /* 背景色を少し濃くして、文字とのコントラストを強める */
    background-color: #f0f8ff; /* 淡い青（アリスブルー）で「選択中」を演出 */

    /* 枠線をはっきり出す（サイトのアクセントカラーに合わせて変えてください） */
    border: 2px solid #0056b3;

    /* 影を深くして、物理的に浮き上がっているように見せる */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

    /* わずかに拡大（1.03倍） */
    transform: translateY(-5px) scale(1.03);
}

/* 4. 停止中、時計のエリアだけ「動いている」ことを強調するために少し明るくする */
.slideshow-container:hover .slide-item.active .analog-clock-area {
    filter: drop-shadow(0 0 8px rgba(0, 86, 179, 0.3));
    background-color: #ffffff;
    border-radius: 50%;
}

/* 5. 地点名（city）を少し強調して「今ここを見ている」と認識させる */
.slideshow-container:hover .slide-item.active .city {
    color: #0056b3;
    font-weight: bold;
    transform: scale(1.1);
    transition: all 0.3s ease;
}