/* --- ここからターゲットマークのスタイル（メモリ追加） --- */

/* コンテナ（親要素）のスタイル */
.image-container {
    position: relative;
    display: inline-block;
}

/* 画像のスタイル */
.person-image {
    width: 300px;
    height: auto;
    display: block;
}

/* 人名（レイヤー）のスタイル - 点滅する部分 */
.person-name {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: green;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    z-index: 20; /* 照準より手前に */
}

/* 人顔検出（ターゲットマーク）のスタイル */
.person-face {
    position: absolute;
    top: 20px; /* 画像の上部からの位置を調整（顔に合わせるため） */
    width: 200px; /* ターゲットマークのサイズを調整 */
    height: 200px; /* ターゲットマークのサイズを調整 */
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    /* 照準器のメインの円と線の設定 */
    border: 2px solid limegreen;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    z-index: 10;
}

    /* 照準器の十字線 (縦線) */
    .person-face::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 100%;
        background-color: limegreen;
    }

    /* 照準器の十字線 (横線) */
    .person-face::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 2px;
        width: 100%;
        background-color: limegreen;
    }

    /* 中央のテキスト ('11111') */
    .person-face > div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: limegreen;
        font-size: 16px;
        z-index: 11;
    }

    /* --- メモリ（目盛り）の追加 --- */

    /* 縦線のメモリ（上側） */
    .person-face:before, .person-face:after {
        content: '';
        position: absolute;
        background-color: limegreen;
        z-index: 12;
    }

    /* 上端のメモリ (横線) */
    .person-face:nth-child(2)::before {
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 2px;
    }

    /* 下端のメモリ (横線) */
    .person-face:nth-child(2)::after {
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 2px;
        top: auto; /* ::afterを横線に使用しているため、新しい擬似要素でメモリを作成します */
    }

    /* 横線のメモリを追加する新しいクラスと擬似要素を使用 */

    /* 縦線のメモリ (上) */
    .person-face .memory-v-top {
        position: absolute;
        top: 10px; /* 上から10pxの位置 */
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 2px;
        background-color: limegreen;
    }

    /* 縦線のメモリ (下) */
    .person-face .memory-v-bottom {
        position: absolute;
        bottom: 10px; /* 下から10pxの位置 */
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 2px;
        background-color: limegreen;
    }

    /* 横線のメモリ (左) */
    .person-face .memory-h-left {
        position: absolute;
        left: 10px; /* 左から10pxの位置 */
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 10px;
        background-color: limegreen;
    }

    /* 横線のメモリ (右) */
    .person-face .memory-h-right {
        position: absolute;
        right: 10px; /* 右から10pxの位置 */
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 10px;
        background-color: limegreen;
    }