/* 1. 全体のコンテナ（比率1500x1200を維持して自動縮小） */
.manga-container {
    position: relative;
    width: 100%;
    max-width: 1500px; 
    aspect-ratio: 1500 / 1200; 
    background-image: url('https://www.minicolor.co.jp/wp_minic/wp-content/uploads/manga_lp_01.webp');
    background-size: cover;
    background-position: center;
    /*box-shadow: 0 4px 10px rgba(0,0,0,0.1);*/

    /*【位置調整用枠】*/
    /*border: 1px solid blue;*/ 
    /*box-sizing: border-box;*/ 

}

/* 2. 重ねる動画（1000x600の比率でレスポンシブ配置） */
.manga-video {
    position: absolute;
    top: 24.90%;  /* 上からの位置（変更する場合は％で計算） */
    left: 2.40%; /* 左からの位置（変更する場合は％で計算） */
    width: 95.30%;
    height: 65.40%;
    object-fit: cover; 
    pointer-events: none; /* ユーザーが動画を誤ってクリック・タップできないようにする設定 */

    /* 【位置調整用の赤枠】
    /*border: 1px solid #ff0000; */
    /*box-sizing: border-box; */
}

/* 3. 円形のクリックエリア（調整用青枠付き） */
.manga-link {
    position: absolute;
    
    /* 【円を配置したい位置を指定（％）】 */
    top: 96.60%;   /* 上からの位置 */
    left: 39.55%;  /* 左からの位置 */
    
    /* 【円の大きさを指定（％）】
       正円にするために、横幅(width)と同じサイズを縦幅(height)にも指定します */
    width: 19.90%; 
    aspect-ratio: 1 / 1; /* 縦横比を1:1にして綺麗な丸にする */
    
    border-radius: 50%; /* 四角を完全に丸くする設定 */
    
    /* 【位置調整用の青枠】*/
    /*border: 3px solid #0000ff; */
    /*box-sizing: border-box;*/
    /*background-color: rgba(0, 0, 255, 0.1);*/ /* どこにあるか分かりやすくするための薄い青色 */

    cursor: pointer; /* マウスを乗せたときに指マークにする */
    z-index: 20; /* 動画や画像よりも手前に配置 */
}

.image-container{

    /*【位置調整用枠】*/
    /*border: 1px solid blue;*/ 
    /*box-sizing: border-box;*/ 

}