.top #main .kv_wrap .kv_bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.top #main .kv_wrap .kv_text_box .kv_text_sub {
    font-family: "Microsoft YaHei", Arial, "Hiragino Sans GB", Sans-Serif;
}

.top #main .top_tofar .ttl_box .sub_ttl,
.top #main .top_features .sec .text_box .ttl,
.top #main .top_cc .ttl,
.top #main .art .ttl_box span {
    font-family: "Microsoft YaHei", Arial, "Hiragino Sans GB", Sans-Serif;
    font-weight: bold;
}

.top #main .art {
    margin: 0 15px 4.0625rem;
}

.top #main .art .ttl_box .ttl {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.top #main .art .ttl_box .ttl img {
    width: auto;
    height: 45px;
}

.top #main .art .ttl_box span {
    color: #8517e5;
    font-size: 0.9375rem;
    letter-spacing: 0.1em;
    margin-left: 0.625rem;
    line-height: 1;
}

.top #main .kv_wrap {
    position: relative;
}

.top #main .kv_wrap .kv_bg {
    width: 100vw;
    height: 100vh;
    background-image: url(../images/top_kv.jpg);
}

.top #main .kv_wrap .kv_text_box {
    background: -webkit-gradient(linear, left top, right top, from(rgba(151, 62, 229, 0.75)), to(rgba(40, 177, 201, 0.75)));
    background: -webkit-linear-gradient(left, rgba(151, 62, 229, 0.75), rgba(40, 177, 201, 0.75));
    background: linear-gradient(to right, rgba(151, 62, 229, 0.75), rgba(40, 177, 201, 0.75));
    position: absolute;
    bottom: 20px;
    border-radius: 111px;
    left: -130px;
    width: 480px;
    height: 110px;
    color: #fff;
}

.top #main .kv_wrap .kv_text_box .kv_sub_box {
    position: relative;
}

.top #main .kv_wrap .kv_text_box .kv_text {
    font-size: 1.75rem;
    letter-spacing: 0;
    position: absolute;
    top: 14px;
    right: 25px;
}

.top #main .kv_wrap .kv_text_box .kv_text_sub {
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    position: absolute;
    top: 59px;
    left: 150px;
}

.top #main .top_cc {
    margin: 3.4375rem 15px 3.75rem;
    text-align: center;
}

.top #main .top_cc .ttl {
    color: #8517e5;
    font-size: 1.75rem;
    line-height: 1.32;
    /* letter-spacing: 0.11em; */
    margin-bottom: 1.875rem;
}

.top #main .top_cc .text {
    font-size: 0.8125rem;
    line-height: 1.92;
    margin-bottom: 1.5625rem;
}

.top #main .top_cc .sub_text {
    font-family: "Microsoft YaHei", Arial, "Hiragino Sans GB", Sans-Serif;
    font-weight: bold;
    color: #8517e5;
    font-size: 0.9375rem;
    line-height: 1.67;
}

.top #main .top_news {
    background-color: #e8d9ff;
    border-radius: 27px;
    padding: 3.75rem 16px 3.875rem;
}

.top #main .top_news .news_ul .news_li {
    border-bottom: 1px solid #b5b5b5;
    padding: 1.25rem 0;
}

.top #main .top_news .news_ul .news_li:last-child {
    border: none;
    margin-bottom: 1.25rem;
}

.top #main .top_news .btn {
    margin-left: 0;
}

.top #main .top_features .sec {
    margin-top: 3.125rem;
}

.top #main .top_features .sec .text_box .ttl {
    font-size: 1.375rem;
    /*letter-spacing: 0.16em;*/
    color: #8517e5;
    margin-top: 0.3125rem;
    line-height: 1.5
}

.top #main .top_features .sec .text_box .text {
    text-align: left;
}

.top #main .top_features .sec .btn {
    margin-top: 0.9375rem;
    margin-left: 0;
}

.top #main .top_features .sec .img_box img {
    border-radius: 15px;
}

.top #main .top_component .ttl_box .ttl span {
    margin-bottom: 0.5rem;
    display: inline-block;
}

.top #main .top_component .text {
    margin-top: 0.9375rem;
}

.top #main .top_component .btn {
    margin-top: 0.9375rem;
    margin-left: 0;
}

.top #main .top_usecase .text {
    margin-top: 0.9375rem;
}

.top #main .top_usecase .flex_box .box {
    margin: 2.8125rem 40px 0;
    text-align: center;
}

.top #main .top_usecase .flex_box .box .img_box video {
    width: 100%;
    height: auto;
}

.top #main .top_usecase .flex_box .box .text_box {
    margin-top: 0.625rem;
}

.top #main .top_usecase .btn {
    margin: 2.5rem auto;
    display: block;
}

.top #main .top_movie {
    display: block;
    background: -webkit-gradient(linear, left top, left bottom, from(#b998fa), to(#de9cf0));
    background: -webkit-linear-gradient(top, #b998fa, #de9cf0);
    background: linear-gradient(to bottom, #b998fa, #de9cf0);
    margin: 5.625rem 0;
    height: 100%;
    padding: 3.125rem 0;
}

.top #main .top_movie .iframe {
    position: relative;
    width: 100%;
    padding-top: 75%;
}

.top #main .top_movie .iframe_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.top #main .top_tofar {
    text-align: center;
}

.top #main .top_tofar .ttl_box .ttl {
    display: inline-block;
}

.top #main .top_tofar .ttl_box .sub_ttl {
    color: #8517e5;
    font-size: 1.0625rem;
    letter-spacing: 0.1em;
}

.top #main .top_tofar .text {
    margin: 1.875rem 10px;
}

.top #main .top_tofar .btn {
    margin-bottom: 1.25rem;
    width: 20.625rem;
}

.top #main .top_tofar .logo {
    width: 30%;
    max-width: 300px;
    margin: 1.25rem auto 0;
}

@media screen and (min-width: 768px) {
    .top #main .art {
        margin: 0 0 12.5rem;
    }

    .top #main .art .ttl_box .ttl img {
        height: 6.25rem;
    }

    .top #main .art .ttl_box span {
        font-size: 1.625rem;
        margin-left: 1.875rem;
    }

    .top #main .kv_wrap .kv_bg {
        background-image: url(../images/top_kv_pc.jpg);
    }

    .top #main .kv_wrap .kv_text_box {
        bottom: 43vh;
        border-radius: 0 12.5rem 12.5rem 0;
        left: -10rem;
        width: 50%;
        height: 15rem;
    }

    .top #main .kv_wrap .kv_text_box .kv_text {
        letter-spacing: 0;
        font-size: 3.625rem;
        line-height: 1;
        margin-bottom: 1.5rem;
        top: 3.75rem;
        right: 6.25rem;
    }

    .top #main .kv_wrap .kv_text_box .kv_text_sub {
        font-size: 1.5rem;
        line-height: 1;
        top: 9.375rem;
    }

    .top #main .kv_wrap .contact .contact_btn {
        position: absolute;
        top: 92vh;
        left: 1.25rem;
        background-color: #8e72f2;
        display: block;
        color: #fff;
        width: 15.625rem;
        border-radius: 2.1875rem;
        text-align: center;
        letter-spacing: 0.12em;
        font-family: "Microsoft YaHei", Arial, "Hiragino Sans GB", Sans-Serif;
        font-size: 1.5rem;
        padding: 0.3125rem 0;
    }

    .top #main .top_cc {
        margin: 10rem 0.9375rem;
        text-align: center;
    }

    .top #main .top_cc .ttl {
        font-size: 3.625rem;
        margin-bottom: 2rem;
    }

    .top #main .top_cc .text {
        font-size: 1.75rem;
        margin-bottom: 0;
        /*letter-spacing: 0.1em;*/
    }

    .top #main .top_news {
        border-radius: 2.3125rem;
        padding: 12.5rem 9rem 9.375rem;
        margin: 0 3rem 13.125rem;
    }

    .top #main .top_news .ttl_box .ttl {
        position: relative;
    }

    .top #main .top_news .ttl_box .ttl img {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        position: absolute;
        top: 3.2rem;
        left: -6.2rem;
        height: 7rem;
    }

    .top #main .top_news .ttl_box .ttl span {
        position: absolute;
        top: -4rem;
        left: 10rem;
        margin-left: 0;
    }

    .top #main .top_news .column {
        margin-left: 13.5rem;
    }

    .top #main .top_news .news_ul .news_li {
        border-bottom: 1px solid #b5b5b5;
        padding: 1.8rem 0;
        font-size: 1.5rem;
        letter-spacing: 0.05em;
    }

    .top #main .top_news .news_ul .news_li span.pc {
        margin-right: 3.125rem;
        display: inline;
    }

    .top #main .top_news .news_ul .news_li:last-child {
        border: none;
        margin-bottom: 3.4rem;
    }

    .top #main .top_features .ttl_box .ttl {
        margin-left: 12.5rem;
        margin-bottom: 10.625rem;
    }

    .top #main .top_features .sec {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        margin-top: 3.125rem;
        margin-bottom: 10.625rem;
        position: relative;
    }

    .top #main .top_features .sec.reverse {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .top #main .top_features .sec.reverse .text_box {
        margin-right: 5rem;
        margin-left: 0;
    }

    .top #main .top_features .sec .img_box {
        width: 50%;
    }

    .top #main .top_features .sec .text_box {
        width: 36.5%;
        margin-left: 5rem;
    }

    .top #main .top_features .sec .text_box .ttl {
        font-size: 2.75rem;
        margin-top: 0;
        margin-bottom: 4.5625rem;
        line-height: 1.4;
    }

    .top #main .top_features .sec .text_box .text {
        font-size: 1.75rem;
        letter-spacing: 0.01em;
        line-height: 1.7;
    }

    .top #main .top_features .sec .img_box img {
        border-radius: 30px;
    }

    .top #main .top_features .sec .btn {
        margin-top: 5.3125rem;
    }

    .top #main .top_features .sec .loop_box.pc {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100vw;
        position: absolute;
        bottom: -6.4rem;
        right: 0;
        z-index: -1;
        overflow: visible;
    }

    .top #main .top_features .sec .loop_box.pc .loop {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        font-size: 10vw;
        color: rgba(255, 255, 255, 0.2980392157);
        font-family: "SST W20 Heavy";
        white-space: nowrap;
        padding: 0 3.125rem;
        letter-spacing: -0.06em;
    }

    .top #main .top_features .sec .loop_box.pc .loop:nth-child(odd) {
        -webkit-animation: loop 30s -15s linear infinite;
        animation: loop 30s -15s linear infinite;
    }

    .top #main .top_features .sec .loop_box.pc .loop:nth-child(even) {
        -webkit-animation: loop2 30s linear infinite;
        animation: loop2 30s linear infinite;
    }

    .top #main .top_component {
        max-width: 1500px;
        width: 80%;
        margin-right: auto;
        margin-left: auto;
    }

    .top #main .top_component .ttl_box .ttl img {
        height: 7rem;
    }

    .top #main .top_component .ttl_box .ttl span {
        line-height: 3;
        margin-bottom: -0.5rem;
    }

    .top #main .top_component .sec {
        position: relative;
    }

    .top #main .top_component .sec .text {
        margin-top: 5rem;
        font-size: 1.75rem;
        max-width: 1130px;
    }

    .top #main .top_component .sec .btn {
        margin-top: 4.125rem;
        margin-left: 0;
    }

    .top #main .top_component .sec .loop_box.pc {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100vw;
        position: absolute;
        bottom: -11.875rem;
        right: 0;
        z-index: -1;
        overflow: visible;
    }

    .top #main .top_component .sec .loop_box.pc .loop {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        font-size: 10vw;
        color: rgba(255, 255, 255, 0.2980392157);
        font-family: "SST W20 Heavy";
        white-space: nowrap;
        padding: 0 3.125rem;
        letter-spacing: -0.06em;
    }

    .top #main .top_component .sec .loop_box.pc .loop:nth-child(odd) {
        -webkit-animation: loop 30s -15s linear infinite;
        animation: loop 30s -15s linear infinite;
    }

    .top #main .top_component .sec .loop_box.pc .loop:nth-child(even) {
        -webkit-animation: loop2 30s linear infinite;
        animation: loop2 30s linear infinite;
    }

    .top #main .top_usecase {
        max-width: 1500px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .top #main .top_usecase .text {
        margin-top: 4.5625rem;
        margin-bottom: 1.25rem;
        font-size: 1.75rem;
    }

    .top #main .top_usecase .btn {
        margin: 3.75rem auto 0;
        display: block;
    }

    .top #main .top_usecase .flex_box {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: top;
        -webkit-align-items: top;
        -ms-flex-align: top;
        align-items: top;
    }

    .top #main .top_usecase .flex_box .box {
        width: 30%;
        margin: 2.8125rem 0 0 0;
    }

    .top #main .top_usecase .flex_box .box .text_box {
        margin-top: 3.125rem;
        font-size: 1.75rem;
        text-align: left;
        /*letter-spacing: 0.09em;*/
        line-height: 1.7;
    }

    .top #main .top_movie {
        margin-left: auto;
        margin-right: auto;
        padding: 6.25rem 0;
        border-radius: 2.3125rem;
        width: 95%;
    }

    .top #main .top_movie .iframe {
        position: relative;
        width: 80%;
        padding-top: 45%;
        margin: 0 auto;
    }

    .top #main .top_movie .iframe_container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .top #main .top_tofar {
        text-align: center;
    }

    .top #main .top_tofar .ttl_box .sub_ttl {
        font-size: 1.875rem;
        margin-top: 1rem;
    }

    .top #main .top_tofar .text {
        margin: 5rem 0.625rem 3.75rem;
        font-size: 2rem;
        letter-spacing: 0.1em;
    }

    .top #main .top_tofar .btn {
        margin-bottom: 2.5rem;
        width: 30rem;
    }

    .top #main .top_tofar .logo {
        width: 40%;
        width: 13.125rem;
        margin: 7.5rem auto 0;
    }
}

@-webkit-keyframes loop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes loop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-webkit-keyframes loop2 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}

@keyframes loop2 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}