.point_box {
    margin: 0 auto;
    width: 750px;
    background-color: #ffffff;
}

.point_jp {
    width: 36% !important;
    position: absolute;
    top: -3%;
    left: -15%;
}

.point_content {
    margin: 0 auto;
    width: 640px;
    /* background-image: url(../images/point_box/point_box_bg.png); */
    background-size: 640px;
    /* background-position: left bottom;
    background-repeat: no-repeat; */
    /* padding-bottom: 48px; */
    padding: 4% 0;
    display: grid;
    grid-template-columns: auto 400px auto;
    grid-template-rows: 1fr 1.5fr 1fr;
    justify-content: center;
    align-content: center;
}

.point_content a {
    text-decoration: none;
}

.product_intro {
    grid-row: 2/3;
    grid-column: 2/3;
    z-index: 100;
}

.point_cycle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    background: #f4a1b2;
    border-radius: 100%;
    flex-direction: column;
}

.point_cycle_text {
    font-weight: 600;
    font-size: 2rem;
    color: #ffffff;
    text-align: center;
    margin: 0;
}

.point_btn {
    color: #fff5d0;
    font-weight: 600;
    font-size: 1.5rem;
    text-align: center;
    height: 10%;
    width: 100%;
    animation: ZoomBtn_1 1s ease-in-out infinite;
}

.video-btn {
    animation: ZoomBtn_2 1s ease-in-out infinite;
}

.video-btn:hover {
    opacity: 0.8;

}

.point_cycle:hover {
    background: #f4a1b2b3;
}

.point_cycle:hover .point_btn {
    color: #fffc6d;
}

@keyframes ZoomBtn_1 {
    0% {
        font-size: 1.3rem;
    }

    50% {
        font-size: 1.5rem;
    }

    100% {
        font-size: 1.3rem;
    }
}

@keyframes ZoomBtn_2 {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.9);
    }
}

.point_cycle_1 {
    grid-row: 1/2;
    grid-column: 2/3;
    transform: translate(150%, 14%);
}

.point_cycle_2 {
    grid-row: 2/3;
    grid-column: 1/2;
    transform: translate(-54%, 111%);
}

.point_cycle_3 {
    grid-row: 2/3;
    grid-column: 3/3;
    transform: translate(-51%, 118%);
    z-index: 101;
}

.point_cycle_4 {
    grid-row: 3/3;
    grid-column: 2/3;
    transform: translate(150%, 114%);
}

.fv img.product_intro {
    width: 100%;
}

.point_content a {
    display: grid !important;
}


@media (max-width: 768px) {
    .point_box {
        width: 100%;
        background-size: 100%;
    }

    .point_content {
        width: 100%;
        background-size: 100%;
        grid-template-columns: 1fr 300px 1fr;
    }

    .point_cycle_1 {
        transform: translate(128%, 12%);
    }

    .point_cycle_2 {
        transform: translate(-58%, 88%);
    }

    .point_cycle_3 {
        transform: translate(-45%, 90%);
    }

    .point_cycle_4 {
        transform: translate(128%, 76%);
    }
}

@media (max-width: 576px) {
    .point_content {
        grid-template-columns: 20% 60% 20%;
    }

    .point_cycle_text {
        font-size: 1.5rem;
    }

    .point_cycle {
        width: 125px;
        height: 125px;
    }

    .point_btn {
        font-size: 1rem;
    }

    .point_cycle_1 {
        transform: translate(180%, 55%);
    }

    .point_cycle_2 {
        transform: translate(-54%, 170%);
    }

    .point_cycle_3 {
        transform: translate(-51%, 180%);
    }

    .point_cycle_4 {
        transform: translate(176%, 131%);
    }

    @keyframes ZoomBtn_1 {
        0% {
            font-size: 0.9rem;
        }

        50% {
            font-size: 1rem;
        }

        100% {
            font-size: 0.9rem;
        }
    }

}

@media (max-width: 426px) {
    /* .point_cycle_text {
        font-size: 1.5rem;
    }

    .point_btn {
        font-size: 1rem;
    } */

    .point_cycle_1 {
        transform: translate(124%, 14%);
    }

    .point_cycle_2 {
        transform: translate(-54%, 111%);
    }

    .point_cycle_3 {
        transform: translate(-51%, 118%);
    }

    .point_cycle_4 {
        transform: translate(120%, 114%);
    }

    /* @keyframes ZoomBtn_1 {
        0% {
            font-size: 0.9rem;
        }

        50% {
            font-size: 1rem;
        }

        100% {
            font-size: 0.9rem;
        }
    } */
}

@media (max-width: 376px) {
    .point_content {
        grid-template-columns: 20% 60% 20%;
    }

    .point_cycle_text {
        font-size: 1.5rem;
    }

    .point_btn {
        font-size: 1rem;
    }

    @keyframes ZoomBtn_1 {
        0% {
            font-size: 0.9rem;
        }

        50% {
            font-size: 1rem;
        }

        100% {
            font-size: 0.9rem;
        }
    }

    .point_content {
        grid-template-columns: 20% 50% 20%;
    }

    .point_cycle_1 {
        transform: translate(86%, 11%);
    }

    .point_cycle_2 {
        transform: translate(-58%, 83%);
    }

    .point_cycle_3 {
        transform: translate(-35%, 94%);
    }

    .point_cycle_4 {
        transform: translate(83%, 75%);
    }
}