@charset "UTF-8";

/*===========================================================
   ヘッダー
=============================================================*/
header {
    animation: header 0.5s alternate ease forwards;
    transition: 0.5s;
    opacity: 0;
}
header.hide {
    transform: translateY(-140%);
}
@keyframes header {
    0% {
        top: -4vw;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}
@media screen and (max-width: 960px) {
    @keyframes header {
        0% {
            top: -7vw;
        }
        100% {
            top: 0;
            opacity: 1;
        }
    }
}
/*===========================================================
   メインビジュアル
=============================================================*/
/* ユニボ */
.main_visual img.main_unibo {
    animation: m-fade-in 2s 1.8s ease-in-out forwards,
        up-down 1.8s 1.7s infinite alternate ease-in-out;
    opacity: 0;
}
/* ユニボ（影） */
.main_unibo_area::after {
    width: 20vw;
    height: 9vw;
    animation: m-fade-in-kage 3s 2s ease-in-out forwards,
        m-kage 1.8s 2.6s infinite alternate ease-in-out;
    opacity: 0;
}
@keyframes m-fade-in {
    0% {
        top: 50vw;
        opacity: 1;
    }
    40% {
        top: 7vw;
        opacity: 1;
    }
    45% {
        top: 7vw;
        opacity: 1;
    }
    100% {
        top: 10vw;
        opacity: 1;
    }
}
@keyframes up-down {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-15px);
    }
}
@keyframes m-fade-in-kage {
    0% {
        top: 80vw;
        opacity: 1;
    }
    40% {
        top: 38vw;
        opacity: 1;
    }
    45% {
        top: 38vw;
        opacity: 1;
    }
    100% {
        top: 39vw;
        opacity: 1;
    }
}
@keyframes m-kage {
    0% {
        transform: scale(1, 1);
    }
    10% {
        transform: scale(1, 1);
    }
    90% {
        transform: scale(0.8, 0.81);
    }
    100% {
        transform: scale(0.8, 0.8);
    }
}
@media screen and (max-width: 1700px) {
    /* ユニボ */
    .main_visual img.main_unibo {
        animation-name: fade-in, up-down;
        animation-delay: 1.2s;
    }
    /* ユニボ（影） */
    .main_unibo_area::after {
        animation-name: m-fade-in-kage, m-kage;
        animation-delay: 1s;
    }
    @keyframes fade-in {
        0% {
            top: 700px;
            opacity: 0;
        }
        40% {
            top: 120px;
            opacity: 1;
        }
        45% {
            top: 120px;
            opacity: 1;
        }
        100% {
            top: 160px;
            opacity: 1;
        }
    }
    /* ユニボ（影） */
    @keyframes m-fade-in-kage {
        0% {
            top: 1800px;
            opacity: 1;
        }
        40% {
            top: 620px;
            opacity: 1;
        }
        45% {
            top: 620px;
            opacity: 1;
        }
        100% {
            top: 630px;
            opacity: 1;
        }
    }
    @keyframes m-kage {
        0% {
            width: 250px;
            height: 100px;
            transform: translateY(0);
        }
        15% {
            width: 250px;
            height: 100px;
            transform: translateY(0);
        }
        85% {
            width: 220px;
            height: 90px;
            transform: translateY(-1vw);
        }
        100% {
            width: 220px;
            height: 90px;
            transform: translateY(-1vw);
        }
    }
}
@media screen and (max-width: 1230px) {
    /* ユニボ */
    .main_visual img.main_unibo {
        animation-name: fade-in, up-down;
        animation-delay: 2s;
    }
    .main_unibo_area::after {
        animation-name: m-fade-in-kage, m-kage;
        animation-delay: 1.8s;
    }
    @keyframes fade-in {
        0% {
            top: 700px;
            opacity: 1;
        }
        40% {
            top: 80px;
            opacity: 1;
        }
        45% {
            top: 80px;
            opacity: 1;
        }
        100% {
            top: 120px;
            opacity: 1;
        }
    }
    /* ユニボ（影） */
    @keyframes m-fade-in-kage {
        0% {
            top: 80vw;
            opacity: 0;
        }
        40% {
            top: 47vw;
            opacity: 1;
        }
        45% {
            top: 47vw;
            opacity: 1;
        }
        100% {
            top: 49vw;
            opacity: 1;
        }
    }
}
@media screen and (max-width: 960px) {
    /* ユニボ */
    .main_visual img.main_unibo {
        animation-name: fade-in, up-down;
        animation-delay: 1.2s;
    }
    .main_unibo_area::after {
        width: 22vw;
        height: 10vw;
        animation-name: m-fade-in-kage, m-kage;
        animation-delay: 1s;
    }
    @keyframes fade-in {
        0% {
            top: 700px;
            opacity: 1;
        }
        40% {
            top: 80px;
            opacity: 1;
        }
        45% {
            top: 80px;
            opacity: 1;
        }
        100% {
            top: 120px;
            opacity: 1;
        }
    }
    @keyframes m-fade-in-kage {
        0% {
            top: 100vw;
            opacity: 0;
        }
        40% {
            top: 56vw;
            opacity: 1;
        }
        45% {
            top: 56vw;
            opacity: 1;
        }
        100% {
            top: 59vw;
            opacity: 1;
        }
    }
    @keyframes m-kage {
        0% {
            transform: scale(1, 1);
        }
        100% {
            transform: scale(0.8, 0.8);
        }
    }
}
@media screen and (max-width: 600px) {
    /* ユニボ */
    .main_visual img.main_unibo {
        animation-name: fade-in, up-down;
        animation-delay: 2s;
    }
    .main_unibo_area::after {
        width: 29vw;
        height: 13vw;
        animation-name: m-fade-in-kage, m-kage;
        animation-delay: 1.8s;
    }
    @keyframes fade-in {
        0% {
            top: 50vw;
            opacity: 1;
        }
        50% {
            top: 3vw;
            opacity: 1;
        }
        100% {
            top: 8vw;
            opacity: 1;
        }
    }
    /* ユニボ影 */
    @keyframes m-fade-in-kage {
        0% {
            top: 180vw;
            opacity: 0;
        }
        40% {
            top: 73vw;
            opacity: 1;
        }
        45% {
            top: 73vw;
            opacity: 1;
        }
        100% {
            top: 75vw;
            opacity: 1;
        }
    }
    @keyframes m-kage {
        0% {
            transform: scale(1, 1);
        }
        100% {
            transform: scale(0.8, 0.8);
        }
    }
}
/* キャッチフレーズ */
.main_txt h2 span {
    position: relative;
    animation: textWave 0.5s ease-in-out forwards;
    animation-delay: 0.5s;
    opacity: 0;
}
.main_txt h2 span:nth-of-type(2) {
    animation-delay: 0.9s; /* アニメーション開始までの遅延 */
}
@keyframes textWave {
    0% {
        top: 0;
    }
    50% {
        top: -0.3em; /* top位置を下げる */
    }
    100% {
        top: 0;
        opacity: 1;
    }
}
.main_txt h2 {
    animation: gradation 0.3s forwards;
    animation-delay: 2s;
}
@keyframes gradation {
    0% {
    }
    100% {
    }
}
/* メインテキスト */
.main_txt p {
    animation: sub-txt 0.5s ease-in-out forwards;
    animation-delay: 1.2s;
    opacity: 0;
}
/* PR動画バナー */
.pr_move.pr_pc {
    animation: sub-txt 0.5s ease-in-out forwards;
    animation-delay: 1.4s;
    opacity: 0;
}
@keyframes sub-txt {
    0% {
        transform: translateX(-5em);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* 背景画像 */
.bg_main:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-color: #fff;
    background-image: radial-gradient(#f4f9ff 20%, rgba(255, 255, 255, 0) 20%),
        radial-gradient(#f4f9ff 20%, rgba(255, 255, 255, 0) 20%);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-serif;
    color: #3c3c3c;
    font-size: 16px;
    max-width: 100%;

    animation: img-wrap 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.8s;
}
@keyframes img-wrap {
    100% {
        transform: translateX(100%);
    }
}
@media screen and (max-width: 980px) {
    .bg_main:before {
        animation: img-wrap 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: 1s;
    }
}
/* ボタン */
.main_visual .btn {
    animation: fade-in2 0.7s 1.8s ease-out forwards;
    opacity: 0;
}
@keyframes fade-in2 {
    0% {
        transform: translateX(-150px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}
/*===========================================================
   h4 h5 (.title_txt)
=============================================================*/
.title_txt {
    position: relative;
    opacity: 0;
}
.scroll .title_txt {
    opacity: 1;
}
.scroll .title_txt::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background: -webkit-linear-gradient(
        0deg,
        #0077ff,
        #00ccff
    ); /* 背景色にグラデーションを指定 */
    /* background: #f6f2fc; */
    bottom: 0;
    left: 0;
    pointer-events: none;
    animation: passing-bar 0.8s ease 0s 1 normal forwards;
    transform: translate3d(0, 0, 0);
}
/* 項目タイトル */
#mode .scroll .title_txt::after,
#plan.scroll .title_txt::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
    animation: passing-bar 0.8s ease 0s 1 normal forwards;
    transform: translate3d(0, 0, 0);
    background-color: #fff;
    background-image: radial-gradient(#f4f9ff 20%, rgba(255, 255, 255, 0) 20%),
        radial-gradient(#f4f9ff 20%, rgba(255, 255, 255, 0) 20%);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-serif;
    color: #3c3c3c;
    font-size: 16px;
    max-width: 100%;
}
.scroll h5.title_txt::after {
    animation-delay: 0.8s;
}
/* 縦長の画面用にアニメーションを遅らせる */
#mode .scroll.tab_delay .title_txt::after {
    animation-delay: 1.4s;
}
@-webkit-keyframes passing-bar {
    0% {
        left: auto;
        right: 0;
        width: 100%;
    }
    100% {
        left: auto;
        right: 0;
        width: 0;
    }
}
@keyframes passing-bar {
    0% {
        left: 0;
        width: 100%;
    }
    100% {
        left: 100%;
        width: 0;
    }
}
/*===========================================================
   service（サービス共通）
=============================================================*/
/* テキストエリア */
.txt_area {
    -webkit-perspective: 600px;
    perspective: 600px;
}
/* ナンバーテキスト */
.service_num {
    opacity: 0;
}
.scroll .service_num {
    animation: num-move 0.4s ease-out forwards;
}
@keyframes num-move {
    0% {
        transform: translateY(80px);
    }
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
}
/* テキスト */
.txt_area p {
    opacity: 0;
}
.service_0.scroll .txt_area p,
.scroll .txt_area p.inner_txt {
    animation: txt-up 0.5s ease-out forwards;
    animation-delay: 0.4s;
}
.scroll .txt_area p.inner_txt {
    animation-delay: 0.5s;
}
/* 縦長の画面用にアニメーションを遅らせる */
.service_0.scroll.tab_delay .txt_area p,
.scroll.tab_delay .txt_area p.inner_txt {
    animation-delay: 1.6s;
}
@keyframes txt-up {
    0% {
        transform: translateY(50px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* イラスト */
#mode .txt_area img {
    opacity: 0;
}
#mode .scroll .txt_area img {
    animation: img-move1-2 0.9s forwards;
    animation-delay: 0.7s;
}
@keyframes img-move1-2 {
    0% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(0);
        opacity: 0.7;
    }
}
/*===========================================================
   service_0（サービス0）
=============================================================*/
.service_0 .img_area img {
    opacity: 0;
}
.service_0.scroll .img_area img {
    animation: img-in 0.8s ease-out forwards;
    animation-delay: 0.3s;
}
.service_0.scroll .img_area img:nth-child(2) {
    animation-delay: 0.5s;
}
.service_0.scroll .img_area img:nth-child(3) {
    animation-delay: 0.7s;
}
@keyframes img-in {
    0% {
        transform: translateY(210px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 縦長の画面用にアニメーションを遅らせる */
.service_0.scroll.tab_delay .img_area img {
    animation: img-in-tablet 0.8s ease-out forwards;
    animation-delay: 1.6s;
}
.service_0.scroll.tab_delay .img_area img:nth-child(2) {
    animation-delay: 1.8s;
}
.service_0.scroll.tab_delay .img_area img:nth-child(3) {
    animation-delay: 2s;
}
@keyframes img-in-tablet {
    0% {
        transform: translateY(210px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/*===========================================================
   service_1（サービス1）
=============================================================*/
/* 画像 */
.service_1 .img_area img,
.service_1::before {
    opacity: 0;
}
.service_1.scroll::before {
    animation: bef-sc 0.5s forwards;
    animation-delay: 0.3s;
}
.service_1.scroll .img_area img {
    animation: img-move1 0.7s ease-out forwards;
    animation-delay: 0.6s;
    opacity: 0;
}
@keyframes bef-sc {
    0% {
        transform: scale(0.6, 0.6);
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}
@keyframes img-move1 {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* IEの場合アニメーションしない */
.service_1.no_animation.scroll::before {
    animation: none;
    opacity: 1;
}
.service_1.no_animation.scroll .img_area img {
    animation: none;
    opacity: 1;
}
/*===========================================================
   service_2（サービス2）
=============================================================*/
/* 画像 */
.service_2 .img_area img,
.service_2::before {
    opacity: 0;
}
.service_2.scroll::before {
    animation: bef-rotation2 0.9s forwards;
    animation-delay: 0.3s;
}
.service_2.scroll .img_area img {
    animation: img-move2 0.7s forwards;
    animation-delay: 0.6s;
    opacity: 0;
}
@keyframes img-move2 {
    0% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes bef-rotation2 {
    0% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0);
        opacity: 1;
    }
}
/* IEの場合アニメーションしない */
.service_2.no_animation.scroll::before {
    animation: none;
    opacity: 1;
}
.service_2.no_animation.scroll .img_area img {
    animation: none;
    opacity: 1;
}
/*===========================================================
   service_3（サービス3）
=============================================================*/
/* 画像 */
.service_3 .img_area img,
.service_3::before {
    opacity: 0;
}
.service_3.scroll::before {
    animation: bef-rotation3 0.9s forwards;
    animation-delay: 0.1s;
}
.service_3.scroll .img_area img {
    animation: img-move3 0.7s forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

@keyframes img-move3 {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes bef-rotation3 {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* IEの場合アニメーションしない */
.service_3.no_animation.scroll::before {
    animation: none;
    opacity: 1;
}
.service_3.no_animation.scroll .img_area img {
    animation: none;
    opacity: 1;
}
/*================================================
　　デバイス
================================================*/
/* 画像 */
.device .txt_area img,
.device .txt_area::before {
    opacity: 0;
}
.device.scroll .txt_area::before {
    animation: d-bef-up 0.5s ease-out forwards;
    animation-delay: 0.6s;
}
.device.scroll .txt_area img {
    animation: d-img-up 0.5s ease-out forwards;
    animation-delay: 0.8s;
}
@keyframes d-bef-up {
    0% {
        transform: translateY(100px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes d-img-up {
    0% {
        transform: translateY(100px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* テキスト */
.device.scroll .txt_area p {
    animation: d-txt-up 0.5s ease-out forwards;
    animation-delay: 0.4s;
}
@keyframes d-txt-up {
    0% {
        transform: translateY(50px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* タブレット */
.device .img_area img {
    opacity: 0;
}
.device.scroll .img_area img {
    animation: d-img-in 2s 0.8s ease-in-out forwards,
        up-down 1.8s 2.8s infinite alternate ease-in-out;
}
@keyframes d-img-in {
    0% {
        top: 50vw;
        opacity: 1;
    }
    40% {
        top: 28vw;
        opacity: 1;
    }
    45% {
        top: 28vw;
        opacity: 1;
    }
    100% {
        top: 36vw;
        opacity: 1;
    }
}
@media screen and (max-width: 1030px) {
    /* タブレット */
    @keyframes d-img-in {
        0% {
            top: 60vw;
            opacity: 1;
        }
        40% {
            top: 35vw;
            opacity: 1;
        }
        45% {
            top: 35vw;
            opacity: 1;
        }
        100% {
            top: 40vw;
            opacity: 1;
        }
    }
}
@media screen and (max-width: 600px) {
    /* タブレット */
    @keyframes d-img-in {
        0% {
            top: 80vw;
            opacity: 1;
        }
        40% {
            top: 53vw;
            opacity: 1;
        }
        45% {
            top: 53vw;
            opacity: 1;
        }
        100% {
            top: 58vw;
            opacity: 1;
        }
    }
}
/*===========================================================
   spec（スペック）
=============================================================*/
/* @media screen and (min-width: 1080px) { */
    /* .spec .img_area {
        -webkit-perspective: 600px;
        perspective: 600px;
    } */
    /* ユニボ（本体） */
    /* .spec .img_area img {
        opacity: 0;
    }
    .spec.scroll .img_area img.unibo_body_before {
        animation: s-unibo-bef-move 1s ease-out forwards;
        animation-delay: 0.8s;
    }
    .spec.scroll .img_area img.unibo_body_after {
        animation: s-unibo-aft-move 1s 0.8s ease-out forwards,
            up-down 1.8s 2s infinite alternate ease-in-out;
        opacity: 0;
    } */
    /* ユニボ（影） */
    /* .spec.scroll .img_area::after {
        animation: s-kage-sc 0.6s 2s ease-in-out forwards,
            s-kage 1.8s 2.6s infinite alternate ease-in-out;
        opacity: 0;
    } */
    /* ユニボ（腕） */
    /* .spec.scroll .img_area img.unubo_hand {
        animation: s-hand-move 1.8s 0.7s ease-in-out forwards,
            ude-up-down 1.8s 2.5s infinite alternate ease-in-out;
        opacity: 0;
    } */
    /* ユニボ（矢印） */
    /* .spec .img_area img.kadou_yoko_1,
    .spec .img_area img.kadou_yoko_2,
    .spec .img_area img.kadou_tate_1,
    .spec .img_area img.kadou_tate_2 {
        opacity: 0;
    }
    .spec.scroll .img_area img.kadou_yoko_1,
    .spec.scroll .img_area img.kadou_yoko_2,
    .spec.scroll .img_area img.kadou_tate_1,
    .spec.scroll .img_area img.kadou_tate_2 {
        animation: kadou-move 1.5s 1.1s ease-in-out forwards,
            kadou-yurayura 1.8s 2.5s ease-in-out alternate infinite;
    } */
    /* ユニボ（本体） */
    /* @keyframes s-unibo-bef-move {
        0% {
            -webkit-transform: rotateY(900deg);
            transform: rotateY(900deg);
            opacity: 1;
        }
        60% {
            -webkit-transform: rotateY(50deg) scale(0.6, 0.6);
            transform: rotateY(50deg) scale(0.6, 0.6);
            opacity: 0;
        }
        70% {
            -webkit-transform: rotateY(50deg) scale(0.6, 0.6);
            transform: rotateY(50deg) scale(0.6, 0.6);
            opacity: 0;
        }
        100% {
            -webkit-transform: rotateY(0);
            transform: rotateY(0);
            opacity: 0;
            visibility: hidden;
        }
    }
    @keyframes s-unibo-aft-move {
        0% {
            -webkit-transform: rotateY(900deg);
            transform: rotateY(900deg);
        }
        60% {
            -webkit-transform: rotateY(50deg) scale(0.6, 0.6);
            transform: rotateY(50deg) scale(0.6, 0.6);
            opacity: 0;
        }
        70% {
            -webkit-transform: rotateY(50deg) scale(0.6, 0.6);
            transform: rotateY(50deg) scale(0.6, 0.6);
            opacity: 1;
        }
        100% {
            -webkit-transform: rotateY(0);
            transform: rotateY(0);
            opacity: 1;
        }
    } */
    /* ユニボ（影） */
    /* @keyframes s-kage-sc {
        0% {
            -webkit-transform: scale(0.2, 0.2);
            transform: scale(0.2, 0.2);
        }
        100% {
            -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
        }
    }
    @keyframes s-kage {
        0% {
            -webkit-transform: translateY(0) scale(1, 1);
            transform: translateY(0) scale(1, 1);
            opacity: 1;
        }
        10% {
            -webkit-transform: translateY(0) scale(1, 1);
            transform: translateY(0) scale(1, 1);
            opacity: 1;
        }
        90% {
            -webkit-transform: translateY(-1vw) scale(0.8, 0.8);
            transform: translateY(-1vw) scale(0.8, 0.8);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateY(-1vw) scale(0.8, 0.8);
            transform: translateY(-1vw) scale(0.8, 0.8);
            opacity: 1;
        }
    } */
    /* ユニボ（腕） */
    /* @keyframes s-hand-move {
        0% {
            opacity: 0;
        }
        40% {
            -webkit-transform: scale(0.6, 0.6);
            transform: scale(0.6, 0.6);
            opacity: 0;
        }
        60% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translate(-30px, 40px);
            transform: translate(-30px, 40px);
            opacity: 1;
        }
    }
    @keyframes ude-up-down {
        0% {
            -webkit-transform: translate(-30px, 40px);
            transform: translate(-30px, 40px);
        }
        100% {
            -webkit-transform: translate(-30px, 20px);
            transform: translate(-30px, 20px);
        }
    } */
    /* ユニボ（矢印） */
    /* @keyframes kadou-move {
        0% {
            -webkit-transform: matrix3d(
                -0.5,
                0,
                0.87,
                0,
                0,
                0.1,
                0,
                0,
                -0.87,
                0,
                -0.5,
                0,
                0,
                0,
                0,
                1
            );
            transform: matrix3d(
                -0.5,
                0,
                0.87,
                0,
                0,
                0.1,
                0,
                0,
                -0.87,
                0,
                -0.5,
                0,
                0,
                0,
                0,
                1
            );
        }
        100% {
            -webkit-transform: rotate3d(0);
            transform: rotate3d(0);
            opacity: 1;
            visibility: visible;
        }
    }
    @keyframes kadou-yurayura {
        0% {
            -webkit-transform: rotate3d(1, 1, 0, 0deg) translateY(0);
            transform: rotate3d(1, 1, 0, 0deg) translateY(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        100% {
            -webkit-transform: rotate3d(1, 1, 0, 20deg) translateY(-15px);
            transform: rotate3d(1, 1, 0, 20deg) translateY(-15px);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
    }
} */
@media screen and (max-width: 1079px) {
    .spec .img_area img.unibo_body_before {
        display: none;
    }
    /* ユニボ（本体） */
    .spec.scroll .img_area img.unibo_body_after {
        animation: up-down2 1.8s 2s infinite alternate ease-in-out;
    }
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        animation: s-kage 1.8s 2.6s infinite alternate ease-in-out;
    }
    /* ユニボ（腕） */
    .spec.scroll .img_area img.unubo_hand {
        animation: s-hand-move 1.8s 0.7s ease-in-out forwards,
            ude-up-down 1.8s 2.5s infinite alternate ease-in-out;
    }
    /* ユニボ（矢印） */
    .spec.scroll .img_area img.kadou_yoko_1,
    .spec.scroll .img_area img.kadou_yoko_2,
    .spec.scroll .img_area img.kadou_tate_1,
    .spec.scroll .img_area img.kadou_tate_2 {
        animation: kadou-yurayura 1.8s 2.5s ease-in-out alternate infinite;
    }
    /* ユニボ（本体） */
    @keyframes up-down2 {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        100% {
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
        }
    }
    /* ユニボ（影） */
    @keyframes s-kage-sc {
        0% {
            -webkit-transform: scale(0.2, 0.2);
            transform: scale(0.2, 0.2);
        }
        100% {
            -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
        }
    }
    @keyframes s-kage {
        0% {
            -webkit-transform: translateY(0) scale(1, 1);
            transform: translateY(0) scale(1, 1);
            opacity: 1;
        }
        10% {
            -webkit-transform: translateY(0) scale(1, 1);
            transform: translateY(0) scale(1, 1);
            opacity: 1;
        }
        90% {
            -webkit-transform: translateY(-1vw) scale(0.8, 0.8);
            transform: translateY(-1vw) scale(0.8, 0.8);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateY(-1vw) scale(0.8, 0.8);
            transform: translateY(-1vw) scale(0.8, 0.8);
            opacity: 1;
        }
    }
    /* ユニボ（腕） */
    @keyframes s-hand-move {
        0% {
            -webkit-transform: translate(0);
            transform: translate(0);
        }
        100% {
            -webkit-transform: translate(-3vw, 1.5vw);
            transform: translate(-3vw, 1.5vw);
        }
    }
    @keyframes ude-up-down {
        0% {
            -webkit-transform: translate(-3vw, 1.5vw);
            transform: translate(-3vw, 1.5vw);
        }
        100% {
            -webkit-transform: translate(-3vw, 0.5vw);
            transform: translate(-3vw, 0.5vw);
        }
    }
    @keyframes kadou-yurayura {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        100% {
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
        }
    }
}
/* テキスト */
.spec.scroll .txt_area p {
    animation: d-txt-up 0.5s ease-out forwards;
    animation-delay: 0.4s;
}
.spec.scroll .txt_area p:last-child {
    animation-delay: 0.8s;
}
@keyframes d-txt-up {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
/* テキストエリア背景 */
.spec::before {
    opacity: 0;
}
.spec.scroll::before {
    animation: s-bef-move 0.8s ease-out forwards;
    animation-delay: 0.2s;
}
@keyframes s-bef-move {
    0% {
        -webkit-transform: scale(0.3, 0.3);
        transform: scale(0.3, 0.3);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
    }
}

@media screen and (max-width: 1700px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        top: 38vw;
        left: 14vw;
        width: 31vw;
        height: 26vh;
    }
}
@media screen and (max-width: 1540px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        top: 40vw;
        width: 350px;
        height: 193px;
    }
}
@media screen and (max-width: 1380px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        top: 41vw;
        left: 14vw;
        width: 267px;
        height: 153px;
    }
}
@media screen and (max-width: 1250px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        width: 263px;
        height: 145px;
    }
}
@media screen and (max-width: 1080px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        top: 41vw;
        left: 16vw;
        width: 200px;
        height: 100px;
    }
}
@media screen and (max-width: 960px) {
    /* テキスト背景 */
    .spec.scroll::before {
        animation: s-bef-move 0.8s ease-out forwards;
        animation-delay: 0.2s;
    }
    @keyframes s-bef-move {
        0% {
            width: 10vw;
            height: 10vw;
            transform: translateX(200px);
            opacity: 1;
        }
        100% {
            width: 45vw;
            height: 35vw;
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        top: 48vw;
        left: 26vw;
        width: 400px;
        height: 214px;
    }
}
@media screen and (max-width: 840px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        width: 300px;
        height: 170px;
    }
}
@media screen and (max-width: 775px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        width: 267px;
        height: 153px;
    }
}
@media screen and (max-width: 700px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        height: 20vh;
    }
}
@media screen and (max-width: 630px) {
    /* テキスト背景 */
    .spec.scroll::before {
        animation: s-bef-move 0.8s ease-out forwards;
        animation-delay: 0.2s;
    }
    @keyframes s-bef-move {
        0% {
            width: 10vw;
            height: 10vw;
            transform: translateX(200px);
            opacity: 1;
        }
        100% {
            width: 50vw;
            height: 35vw;
            transform: translateX(0);
            opacity: 1;
        }
    }
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        top: 51vw;
        left: 30vw;
        width: 184px;
        height: 102px;
    }
}
@media screen and (max-width: 600px) {
    /* テキスト背景 */
    .spec.scroll::before {
        animation: s-bef-move 0.8s ease-out forwards;
        animation-delay: 0.2s;
    }
    @keyframes s-bef-move {
        0% {
            width: 10vw;
            height: 10vw;
            transform: translateX(200px);
            opacity: 1;
        }
        100% {
            width: 45vw;
            height: 55vw;
            transform: translateX(0);
            opacity: 1;
        }
    }
}

@media screen and (max-width: 560px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        width: 178px;
        height: 102px;
    }
}
@media screen and (max-width: 490px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        width: 130px;
        height: 75px;
    }
}
@media screen and (max-width: 455px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        width: 131px;
        height: 75px;
    }
}
@media screen and (max-width: 420px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        width: 143px;
        height: 78px;
    }
}
@media screen and (max-width: 380px) {
    /* ユニボ（影） */
    .spec.scroll .img_area::after {
        top: 50vw;
        left: 25vw;
        width: 130px;
        height: 75px;
    }
}
/*===========================================================
   PR動画
=============================================================*/
/* 背景色 */
.pr .pr_inner::before {
    opacity: 0;
}
/*===========================================================
   price（プライス）
=============================================================*/
/* 背景色 */
.price .price_inner::before {
    opacity: 0;
}
.price.scroll .price_inner::before {
    content: "";
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
    background-color: rgba(233, 243, 255, 0.5);
    animation: p-background-move 0.8s ease-out forwards;
    animation-delay: 0.4s;
}
@keyframes p-background-move {
    0% {
        transform: scale(0, 0);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}
/*===========================================================
   ページトップへ
=============================================================*/
.page_top img {
    animation: yurayura 3s infinite ease-in-out;
    transform: rotate(10deg);
}
@keyframes yurayura {
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(10deg);
    }
}