@charset "utf-8";

body {
    width: 100%;
    height: auto;
}

#hakko img,
video {
    display: block;
    margin: auto;
}

#hakko {
    width: 100%;
    height: auto;
    background: #fff;
}

#hakko .l_wrapper {
    width: 100%;
    height: auto;
    max-width: 750px;
    margin: 0 auto;
}

#hakko .fv_area {
    width: 100%;
    height: auto;
}

#hakko .fv_area_inner {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .logo_img {
    width: 18%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

#hakko .logo_img img {
    width: 100%;
    height: auto;
}

#hakko .fv_image_container {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .fv_back_item {
    width: 100%;
    height: auto;
}

#hakko .fv_back_item img {
    width: 100%;
    height: auto;
}

#hakko .fv_pink_circle {
    width: 39.2%;
    height: auto;
    position: absolute;
    top: 0;
    right: -1%;
}

#hakko .fv_pink_circle img {
    width: 100%;
    height: auto;
}

#hakko .fv_item_min {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 1%;
}

#hakko .fv_item_min img {
    width: 100%;
    height: auto;
}

#hakko .fv_image_photo {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

#hakko .fv_image_photo img {
    width: 100%;
    height: auto;
}

#hakko .fv_deco_item {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    z-index: 1;
}

#hakko .fv_deco_item img {
    width: 100%;
    height: auto;
}

#hakko .fv_obj {
    width: 22%;
    height: auto;
}

#hakko .fv_obj img {
    width: 100%;
    height: auto;
}

#hakko .fv_obj_1 {
    position: absolute;
    top: 38.7%;
    left: 10.4%;
    animation: fuyofuyo 1.5s infinite 1s linear;
}

#hakko .fv_obj_2 {
    position: absolute;
    top: 38.7%;
    right: 10.3%;
    animation: fuyofuyo_re 1.5s infinite 1s linear;
}

@keyframes fuyofuyo {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(2px);
    }

    75% {
        transform: translateY(-2px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fuyofuyo_re {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-2px);
    }

    75% {
        transform: translateY(2px);
    }

    100% {
        transform: translateY(0);
    }
}

#hakko .six_seibun_area {
    width: 100%;
    height: auto;
}

#hakko .six_seibun_inner {
    width: 100%;
    height: auto;
}

#hakko .six_seibun_image_container {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .kowa_logo {
    width: 30.66%;
    height: auto;
    position: absolute;
    top: 39.5%;
    right: -0.5%;
    z-index: 2;
}

#hakko .kowa_logo img {
    width: 100%;
    height: auto;
}

#hakko .six_seibun_circle {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

#hakko .six_seibun_circle img {
    width: 100%;
    height: auto;
}

#hakko .six_seibun_arrow {
    width: 24%;
    height: auto;
    position: absolute;
    top: 24.5%;
    left: 38.13%;
}

#hakko .six_seibun_arrow img {
    width: 100%;
    height: auto;
}

#hakko .six_seibun_buy_image {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: -47%;
}

#hakko .six_seibun_buy_image img {
    width: 100%;
    height: auto;
}

#hakko .six_seibun_buy_btn_image {
    width: 46.66%;
    height: auto;
    position: absolute;
    left: 26.45%;
    bottom: 2.8%;
    transition: 0.3s;
}

#hakko .six_seibun_buy_btn_image:hover {
    filter: brightness(1.1);
}

#hakko .six_seibun_buy_btn {
    width: 100%;
    height: 100%;
}

#hakko .six_seibun_buy_btn img {
    width: 100%;
    height: auto;
}

#hakko .teiki_area {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: -1px;
}

#hakko .teiki_area img {
    width: 100%;
    height: auto;
}

#hakko .teiki_link_wrap {
    width: 30.8%;
    height: 34px;
    border-radius: 12px;
    /* background-color: aquamarine; */
    position: absolute;
    bottom: 41.5%;
    left: 34.4%;
}

#hakko .teiki_link {
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    border-radius: 12px;
    background-color: #fff;
    opacity: 0;
}

#hakko .teiki_link:hover {
    opacity: 0.2;
}

#hakko .negative_area {
    width: 100%;
    height: auto;
}

#hakko .negative_area_inner {
    width: 100%;
    height: auto;
}

#hakko .negative_title {
    width: 100%;
    height: auto;
    padding: 7% 0 4% 0;
}

#hakko .negative_title img {
    width: 100%;
    height: auto;
}

#hakko .negative_image_container {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .negative_image {
    width: 33.333%;
    height: auto;
}

#hakko .negative_image img {
    width: 100%;
    height: auto;
}

#hakko .negative_image_1 {
    margin: 0 3.9% 0 auto;
}

#hakko .negative_image_2 {
    position: absolute;
    top: 16%;
    left: 0%;
}

#hakko .negative_image_3 {
    margin: -4% auto 0 36.46%;
}

#hakko .negative_fukidashi {
    height: auto;
}

#hakko .negative_fukidashi img {
    width: 100%;
    height: auto;
}

#hakko .negative_fukidashi_1 {
    width: 28.26%;
    position: absolute;
    top: 10%;
    left: 16.26%;
}

#hakko .negative_fukidashi_2 {
    width: 33.46%;
    position: absolute;
    top: 24%;
    left: 49.46%;
}

#hakko .negative_fukidashi_3 {
    width: 22.53%;
    position: absolute;
    top: 83%;
    left: 24.26%;
}

#hakko .tegotae {
    width: 100%;
    height: auto;
    padding-top: 5%;
}

#hakko .tegotae img {
    width: 100%;
    height: auto;
}

#hakko .buy_area_white {
    width: 100%;
    height: auto;
    padding-top: 2%;
}

#hakko .buy_area_white_inner {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .buy_area_white_inner img {
    width: 100%;
    height: auto;
}

#hakko .buy_btn_wrap {
    width: 46.66%;
    height: auto;
    position: absolute;
    bottom: 26%;
    left: 26%;
}

#hakko .buy_btn {
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

#hakko .buy_btn img {
    width: 100%;
    height: auto;
}

#hakko .buy_btn:hover {
    filter: brightness(1.1);
}

#hakko .fu_esc_area {
    width: 100%;
    height: auto;
}

#hakko .fu_esc_area_inner {
    width: 100%;
    height: auto;
}

#hakko .fu_esc_image_container {
    width: 100%;
    height: auto;
}

#hakko .fu_esc_image {
    width: 100%;
    height: auto;
    margin-bottom: 5%;
    margin-top: 5%;
}

#hakko .fu_esc_image img {
    width: 100%;
    height: auto;
}

#hakko .jelly_hand_image {
    width: 28.5%;
    height: auto;
    position: absolute;
    bottom: 0;
    right: 0;
}

#hakko .jelly_hand_image img {
    width: 100%;
    height: auto;
}

#hakko .fv_image_container_2 {
    padding-bottom: 6%;
}

#hakko .fv_back_title {
    width: 100%;
    height: auto;
    position: absolute;
    top: 7%;
    left: 0;
}

#hakko .fv_pink_circle_2 {
    top: -3%;
}

#hakko .fv_back_title img {
    width: 100%;
    height: auto;
}

#hakko .fv_deco_item_2 {
    top: 55.5%;
}

#hakko .video_area {
    width: 100%;
    height: auto;
    background-color: #FEDC71;

}

#hakko .video_area_inner {
    width: 100%;
    height: auto;
}

#hakko .video_area_inner video {
    width: auto;
    height: auto;
    max-width: 375px;
    margin: 0 auto;
}

#hakko .point_1 {
    width: 100%;
    height: auto;
}

#hakko .point_1_inner {
    width: 100%;
    height: auto;
}

#hakko .point_1_image {
    width: 100%;
    height: auto;
}

#hakko .point_1_image img {
    width: 100%;
    height: auto;
}

#hakko .point_1_image_aroow {
    width: 100%;
    height: auto;
    margin-bottom: 3%;
}

#hakko .point_1_image_aroow img {
    width: 100%;
    height: auto;
}

#hakko .point_1_video {
    width: 100%;
    height: auto;
}

#hakko .point_1_video video {
    width: 100%;
    height: auto;
}

#hakko .point_1_plus {
    width: 100%;
    height: auto;
}

#hakko .point_1_plus_image {
    width: 100%;
    height: auto;
}

#hakko .point_1_plus_image img {
    width: 100%;
    height: auto;
}

#hakko .point_2_area {
    width: 100%;
    height: auto;
}

#hakko .point_2_area_inner {
    width: 100%;
    height: auto;
}

#hakko .point_2_image_container {
    width: 100%;
    height: auto;
    background-color: #F1CDD7;
}

#hakko .point_2_image {
    width: 100%;
    height: auto;
}

#hakko .point_2_image img {
    width: 100%;
    height: auto;
}

#hakko .point_2_circle_image {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .point_2_circle_image img {
    width: 100%;
    height: auto;
}

#hakko .point_2_circle_image_sarani {
    width: 21.06%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

#hakko .point_2_circle_image_sarani img {
    width: 100%;
    height: auto;
}

#hakko .ikiiki_image_container {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .ikiiki_image {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

#hakko .ikiiki_image img {
    width: 100%;
    height: auto;
}

#hakko .ikiiki_image_bg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 8%;
    left: 0;
}

#hakko .ikiiki_image_bg img {
    width: 100%;
    height: auto;
}

#hakko .ig_area {
    width: 100%;
    height: auto;
    padding-bottom: 10%;
}

#hakko .ig_area_inner {
    width: 100%;
    height: auto;
}

#hakko .ig_image_container {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .ig_image {
    width: 100%;
    height: auto;
}

#hakko .ig_image img {
    width: 100%;
    height: auto;
}

#hakko .ig_fukidashi_image {
    height: auto;
}

#hakko .ig_fukidashi_image img {
    width: 100%;
    height: auto;
}

#hakko .ig_fukidashi_image_1 {
    width: 64.13%;
    position: absolute;
    top: 19.5%;
    left: 32.66%;
}

#hakko .ig_fukidashi_image_2 {
    width: 51.98%;
    position: absolute;
    top: 52.5%;
    left: 6.93%;
}

#hakko .ig_fukidashi_image_3 {
    width: 57.22%;
    position: absolute;
    top: 79.5%;
    left: 35.2%;
}

#hakko .ig_more_btn {
    width: 46.66%;
    height: auto;
    position: absolute;
    bottom: -1.5%;
    left: 50%;
    transform: translate(-50%, 0);
}

#hakko .ig_more_link {
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

#hakko .ig_more_link img {
    width: 100%;
    height: auto;
}

#hakko .ig_more_link:hover {
    filter: brightness(1.07);
}

#hakko .grad_buy_area {
    width: 100%;
    height: auto;
}

#hakko .grad_buy_area_inner {
    width: 100%;
    height: auto;
}

#hakko .grad_buy_image_container {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .grad_buy_image {
    width: 100%;
    height: auto;
}

#hakko .grad_buy_image img {
    width: 100%;
    height: auto;
}

#hakko .grad_buy_btn_wrap {
    width: 46.66%;
    height: auto;
    position: absolute;
    top: 34%;
    left: 26.66%;
}

#hakko .grad_buy_btn {
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

#hakko .grad_buy_btn img {
    width: 100%;
    height: auto;
}

#hakko .grad_buy_btn:hover {
    filter: brightness(1.1);
}

#hakko .grad_teiki_link_wrap {
    width: 30.9%;
    height: 34px;
    border-radius: 13px;
    position: absolute;
    bottom: 22.8%;
    left: 34.4%;
}

#hakko .grad_teiki_link {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 13px;
    transition: 0.3s;
    opacity: 0;
}

#hakko .grad_teiki_link:hover {
    opacity: 0.2;
}

#hakko .akippoi_image {
    width: 100%;
    height: auto;
}

#hakko .akippoi_image img {
    width: 100%;
    height: auto;
}

#hakko .taikoban_area {
    width: 100%;
    height: auto;
}

#hakko .taikoban_area_inner {
    width: 100%;
    height: auto;
}

#hakko .taikoban_image_container {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .taikoban_image {
    width: 100%;
    height: auto;
}

#hakko .taikoban_image img {
    width: 100%;
    height: auto;
}

#hakko .ygr_video_box {
    width: 20%;
    height: 11.5%;
    position: absolute;
    top: 20.5%;
    right: 5%;
}

#hakko .ygr_video_box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 100%;
}

#hakko .ygr_video {
    width: 100%;
    height: 100%;
}

#hakko .ygr_video video {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

#hakko .customer_voice_area {
    width: 100%;
    height: auto;
    padding-bottom: 5%;
}

#hakko .customer_voice_area_inner {
    width: 100%;
    height: auto;
}

#hakko .customer_voice_image_container {
    width: 100%;
    height: auto;
    position: relative;
}

#hakko .customer_voice_image {
    width: 100%;
    height: auto;
    margin-top: 4%;
}

#hakko .customer_voice_image img {
    width: 100%;
    height: auto;
}

#hakko .customer_voice_fukidashi {
    height: auto;
}

#hakko .customer_voice_fukidashi img {
    width: 100%;
    height: auto;
}

#hakko .customer_voice_fukidashi_1 {
    width: 50.1%;
    margin: -4% auto 0 11%;
    position: relative;
    z-index: 1;
}

#hakko .customer_voice_fukidashi_2 {
    width: 42.49%;
    margin: -15% 6.62% 0 auto;
}

#hakko .customer_voice_fukidashi_3 {
    width: 47.04%;
    margin: -26.5% auto 0 0;
}

#hakko .customer_voice_fukidashi_4 {
    width: 40.1%;
    margin: -13% 22.66% 0 auto;
    position: relative;
    z-index: 1;
}

#hakko .customer_voice_min {
    width: 28.51%;
    height: auto;
    margin: -2% 0 0 auto;
}

#hakko .customer_voice_min img {
    width: 100%;
    height: auto;
}

#hakko .six_seibun_area_last {
    margin-top: -3%;
}

#hakko .jelly_hand_image_min {
    width: 26%;
    bottom: 6%;
    right: -1%;
}

#hakko .six_seibun_text {
    width: 100%;
    height: auto;
    position: absolute;
    top: -3%;
    left: 0;
    z-index: 2;
}

#hakko .six_seibun_text img {
    width: 100%;
    height: auto;
}

#hakko .fv_deco_item_3 {
    top: 54%;
}

/* PC ================================================== */
@media all and (min-width:1025px) {}

/* Tablet ================================================== */
@media all and (max-width:769px) {}

/* SP ================================================== */
@media all and (max-width:768px) {
    #hakko .l_wrapper {
        width: 100%;
        height: auto;
        max-width: 100%;
        margin: 0 auto;
    }

    #hakko .fv_area {
        width: 94%;
        margin: 0 auto;
    }

    #hakko .six_seibun_area {
        width: 94%;
        margin: 0 auto;
    }

    #hakko .negative_area {
        width: 94%;
        margin: 0 auto;
    }

    #hakko .buy_area_white {
        width: 94%;
        margin: 0 auto;
    }

    #hakko .fv_image_container {
        width: 94%;
        margin: 0 auto;
    }

    #hakko .point_1_inner {
        width: 94%;
        margin: 0 auto;
    }

    #hakko .point_1_image_aroow {
        width: 94%;
        margin: 0 auto 3% auto;
    }

    #hakko .point_2_circle_image {
        width: 94%;
        margin: 0 auto;
    }

    #hakko .ikiiki_image {
        width: 94%;
        margin: 0 auto;
    }

    #hakko .customer_voice_area {
        width: 94%;
        margin: 0 auto;
    }

    #hakko .video_area {
        background-color: #fff;
    }

    #hakko .video_area_inner {
        width: 100%;
        height: 375px;
        overflow: hidden;
        position: relative;
        aspect-ratio: 1/1;
    }

    #hakko .video_area_inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        max-width: initial;
    }

    #hakko .kowa_logo {
        right: 0;
    }

    #hakko .fv_item_min {
        left: 0;
    }

    #hakko .fv_pink_circle {
        right: 0;
    }

    #hakko .fv_pink_circle_2 {
        right: 0;
    }

    #hakko .jelly_hand_image_min {
        right: 0;
    }

    #hakko .six_seibun_circle.min_zoom {
        transform: scale(1);
    }

    #hakko .six_seibun_circle.min_zoom.run {
        animation: unset;
    }

    #hakko .six_seibun_circle.six_seibun_circle_btm.min_zoom.run {
        animation: min_zoom 0.5s ease;
    }

    @keyframes min_zoom {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.03);
        }

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