html,
body ,blockquote{
    padding: 0;
    margin: 0;
}
#wrap {
    overflow: hidden;
    /*background-color: #f4f4f4;*/
}
.content {
    position: relative;
    background-color: #ffffff;
}
.content .video01 {
    margin-top: -630px;
    padding: 0 50px;
}
.content .video02 {
    margin-top: -630px;
    padding: 0 20px;
}
.content .video03 {
    margin-top: -680px;
    padding: 0 20px;
}
.content .w_video04,
.content .w_video05,
.content .w_video07{
    position: relative;
}
.content .video04,
.content .video05,
.content .video06,
.content .video07{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 220px;
    width: 710px;
}
.content .video05{
    top: -20px;
    width: 600px;
}
.content .video06{
    top: 560px;
}
.content .video07{
    top: 320px;
}
.content .link01{
    margin-top: -150px;
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
}
.content .link01 a{
    font-size: 36px;
}
.content .cta01{
    margin-top: -260px;
    text-align: center;
}
.content .cta01 img{
    display: inline-block;
    max-width: 600px;
    height: auto;
}
.content .cta02{
    margin-top: -380px;
    text-align: center;
    margin-left: 30px;
}
.content .cta02.mt0{
    margin-top: 0;
}
.content .cta02 img{
    width: 100%;
    display: inline-block;
    height: auto;
}
/* 左から右へフェードインするアニメーション */
.fade-in-left {
    opacity: 0;
    transition-duration: 2000ms;
    transform: translate(-50px, 0); /* 左側から移動開始 */
    z-index: 1;
}

/* 右から左へフェードインするアニメーション */
.fade-in-right {
    opacity: 0;
    transition-duration: 2000ms;
    transform: translate(50px, 0); /* 右側から移動開始 */
    z-index: 1;
}

/* 下から上へフェードインするアニメーション */
.fade-in-up {
    opacity: 0;
    transition-duration: 2000ms;
    transform: translate(0, 50px); /* 下側から移動開始 */
    z-index: 1;
}

/* 上から下にフェードインするアニメーション */
.fade-in-down {
    opacity: 0;
    transition-duration: 2000ms;
    transform: translate(0, -50px); /* 上側から移動開始 */
    z-index: 1;
}

/* アニメーション完了後の共通の最終状態 */
.fade-in-end {
    opacity: 1;
    transform: translate(0, 0); /* 通常状態へ */
}

.info{
    position: relative;
}
.info .fade-in-up{
    position: absolute;
    text-align: center;
    width: 100%;
}
.info .text01{
    top: 370px;
}
.info .text01 img{
    width: 550px;
}
.info .text02{
    top: 110px;
}
.info .text02 img{
    width: 680px;
}
.info .text03{
    top: 120px;
}
.info .text03 img{
    width: 620px;
}
.info .text04{
    top: 140px;
}
.info .text04 img{
    width: 560px;
}
.info .text05{
    top: 130px;
}
.info .text05 img{
    width: 700px;
}
.content .cta03{
    position: relative;
}
.content .cta03 .cta02{
    position: absolute;
    top: 470px;
}
.content .cta03 .btn{
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 141px;
}

.content .cta03 .btn img{
    width: 560px;
}
.content .cta03 > a{
    position: absolute;
    display: inline-block;
    height: 40px;
    bottom: 10px;
}
.content .cta03 .company{
    /*background: rgba(0,0,0,0.5);*/
    width: 100px;
    left :83px;
}
.content .cta03 .tokusyo{
    /*background: rgba(0,0,0,0.5);*/
    width: 270px;
    left :190px;
}
.content .cta03 .pp{
    /*background: rgba(0,0,0,0.5);*/
    width: 200px;
    left :470px;
}
.w_fukidashi{
    position: relative;
}
.fukidashi01{
    position: absolute;
    top: 120px;
    left: 50px;
}
.fukidashi02{
    position: absolute;
    top: 275px;
    left: 50px;
}
.fukidashi03{
    position: absolute;
    top: 405px;
    left: 50px;
}
.fukidashi04{
    position: absolute;
    top: 520px;
    left: 50px;
}

.content p {
    padding: 0;
    margin: 0;
    text-align: center;
    color: #1d96d5;
}
.content a {
    color: #1d96d5;
    font-weight: bold;
    font-size: 21px;
}
.content p img {
    width: 100%;
}
.content p video {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.FV{
    background-image:url("https://d2w53g1q050m78.cloudfront.net/vieoncojp/uploads/2ABCE1C7-91FB-4808-B941-931C324AD682.png?1662539575460");
    background-size:contain;
    display: flex;
    align-items: center;
    justify-content: center;
}


.blink{
    text-align:center;
    color:red;
    animation: blinking 1s ease-in-out infinite alternate;
}

@keyframes blinking {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.wear{
    transform:rotate(90deg);
}

.keyframe0{
    animation-name: anim_v;
}
.keyframe1{
    animation-name: anim_v2;
}

@keyframes anim_v {
    0% {
        transform: translate(0, 0px);
    }
    100% {
        transform: translate(0, 60px);
    }
}
@keyframes anim_v2 {
    0% {
        transform: translate(0, 0px);
    }
    100% {
        transform: translate(0, 20px);
    }
}

.animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}


#wrap .content .pr{
    position: absolute;
    right:0;
    padding-right: 20px;

}
#wrap .content .pr a{
    text-decoration: none;
    color: #000;
    font-size: 13px;

}
.content .mt100{
    margin-top: 100px;
}
.content .mt120{
    margin-top: 120px;
}
.w_gif{
    position: relative;

}
.w_gif .gif01{
    position: absolute;
    top: 58px;
    right: 87px;
    width: 287px;
}
.w_gif .gif02{
    position: absolute;
    top: 751px;
    left: 89px;
    width: 287px;
}
.w_arrow{
    position: relative;
}
.arrows{
    position: absolute;
    height: 100px;
    width: 100%;
    top: 590px;
}
.arrows .first{
    animation: arrow-move08 2s ease-in-out infinite;
}
.arrows .second{
    animation: arrow-move08 2s 1s ease-in-out infinite;

}
.arrows .arrow img{
    width: 60px;
}
.arrows .arrow{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    /*透明度（0=透明、1=不透明）*/
    opacity: 0;
}

.cp_arrows .cp_arrowsecond {
    /*アニメーション設定。
    左からアニメーション名、動きの速さ（2s=2秒）、開始時間（1s=1秒後）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
}
@keyframes arrow-move08 {

    /*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
    0% {
        top: 40%;
        opacity: 0;
    }

    /*2sの70％（1.7秒）時に不透明になる*/
    70% {
        opacity: 1;
    }

    /*2s（2秒）時に透明になる*/
    100% {
        opacity: 0;
    }
}
@media screen and (min-width: 750px) {
    .content {
        width: 750px;
        margin-left: auto;
        margin-right: auto;
        background-color: #ffffff;
    }
}
@media screen and (max-width: 749px) {
    html,
    body ,blockquote{
        padding: 0;
        margin: 0;
    }
    body::-webkit-scrollbar{
        display: none;
    }
    #wrap {
        overflow: hidden;
        /*background-color: #f4f4f4;*/
    }
    .content {
        position: relative;
        background-color: #ffffff;
    }
    .content .video01 {
        margin-top: -84vw;
        padding: 0 6.667vw;
    }
    .content .video02 {
        margin-top: -84vw;
        padding: 0 4vw;
    }
    .content .video03 {
        margin-top: -90.667vw;
        padding: 0 4vw;
    }
    .content .w_video04,
    .content .w_video05,
    .content .w_video07{
        position: relative;
    }
    .content .video04,
    .content .video05,
    .content .video06,
    .content .video07{
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        top: 29.333vw;
        width: 94.667vw;
    }
    .content .video04{
        padding: 0 8vw;
    }
    .content .video05{
        top: -2.667vw;
        width: 80vw;
    }
    .content .video06{
        top: 75.667vw;
        width: 82vw;
    }
    .content .video07{
        top: 42.667vw;
    }
    .content .link01{
        margin-top: -20vw;
        margin-bottom: 13.333vw;

    }
    .content .link01 a{
        font-size: 4.8vw;
    }
    .content .cta01{
        margin-top: -34.667vw;
        text-align: center;
    }
    .content .cta01 img{
        display: inline-block;
        max-width: 80vw;
        height: auto;
    }
    .content .cta02{
        margin-top: -50.667vw;
        text-align: center;
        margin-left: 4vw;
    }
    .content .cta02.mt0{
        margin-top: 0;
    }
    .content .cta02 img{
        width: 100%;
        display: inline-block;
        height: auto;
    }
    /* 左から右へフェードインするアニメーション */
    .fade-in-left {
        opacity: 0;
        transition-duration: 2000ms;
        transform: translate(-50px, 0); /* 左側から移動開始 */
        z-index: 1;
    }

    /* 右から左へフェードインするアニメーション */
    .fade-in-right {
        opacity: 0;
        transition-duration: 2000ms;
        transform: translate(50px, 0); /* 右側から移動開始 */
        z-index: 1;
    }

    /* 下から上へフェードインするアニメーション */
    .fade-in-up {
        opacity: 0;
        transition-duration: 2000ms;
        transform: translate(0, 50px); /* 下側から移動開始 */
        z-index: 1;
    }

    /* 上から下にフェードインするアニメーション */
    .fade-in-down {
        opacity: 0;
        transition-duration: 2000ms;
        transform: translate(0, -50px); /* 上側から移動開始 */
        z-index: 1;
    }

    /* アニメーション完了後の共通の最終状態 */
    .fade-in-end {
        opacity: 1;
        transform: translate(0, 0); /* 通常状態へ */
    }

    .info{
        position: relative;
    }
    .info .fade-in-up{
        position: absolute;
        text-align: center;
        width: 100%;
    }
    .info .text01{
        top: 49.333vw;
    }
    .info .text01 img{
        width: 73.333vw;
    }
    .info .text02{
        top: 14.667vw;
    }
    .info .text02 img{
        width: 90.667vw;
    }
    .info .text03{
        top: 16vw;
    }
    .info .text03 img{
        width: 82.667vw;
    }
    .info .text04{
        top: 18.667vw;
    }
    .info .text04 img{
        width: 74.667vw;
    }
    .info .text05{
        top: 17.333vw;
    }
    .info .text05 img{
        width: 93.333vw;
    }
    .content .cta03{
        position: relative;
    }
    .content .cta03 .cta02{
        position: absolute;
        top: 63.667vw;
    }
    .content .cta03 .btn{
        position: absolute;
        text-align: center;
        width: 100%;
        bottom: 18vw;
    }

    .content .cta03 .btn img{
        width: 74.667vw;
    }
    .content .cta03 > a{
        position: absolute;
        display: inline-block;
        height: 5.333vw;
        bottom: 1.333vw;
    }
    .content .cta03 .company{
        /*background: rgba(0,0,0,0.5);*/
        width: 13.333vw;
        left :11.067vw;
    }
    .content .cta03 .tokusyo{
        /*background: rgba(0,0,0,0.5);*/
        width: 36vw;
        left :25.333vw;
    }
    .content .cta03 .pp{
        /*background: rgba(0,0,0,0.5);*/
        width: 26.667vw;
        left :62.667vw;
    }
    .w_fukidashi{
        position: relative;
    }
    .fukidashi01{
        position: absolute;
        top: 16vw;
        left: 6.667vw;
        width: 86.667vw;
    }
    .fukidashi02{
        position: absolute;
        top: 36.667vw;
        left: 6.667vw;
        width: 65.733vw;
    }
    .fukidashi03{
        position: absolute;
        top: 54vw;
        left: 6.667vw;
        width: 74.667vw;
    }
    .fukidashi04{
        position: absolute;
        top: 69.333vw;
        left: 6.667vw;
        width: 85.333vw;
    }

    .content p {
        padding: 0;
        margin: 0;
        text-align: center;
        color: #1d96d5;
    }
    .content a {
        color: #1d96d5;
        font-weight: bold;
        font-size: 2.8vw;
    }
    .content p img {
        width: 100%;
    }
    .content p video {
        display: block;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .FV{
        background-image:url("https://d2w53g1q050m78.cloudfront.net/vieoncojp/uploads/2ABCE1C7-91FB-4808-B941-931C324AD682.png?1662539575460");
        background-size:contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .blink{
        text-align:center;
        color:red;
        animation: blinking 1s ease-in-out infinite alternate;
    }

    @keyframes blinking {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }
    .wear{
        transform:rotate(90deg);
    }

    .keyframe0{
        animation-name: anim_v;
    }
    .keyframe1{
        animation-name: anim_v2;
    }

    @keyframes anim_v {
        0% {
            transform: translate(0, 0px);
        }
        100% {
            transform: translate(0, 4vw);
        }
    }
    @keyframes anim_v2 {
        0% {
            transform: translate(0, 0px);
        }
        100% {
            transform: translate(0, 2vw);
        }
    }

    .animation{
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-duration: 1.5s;
    }


    #wrap .content .pr{
        position: absolute;
        right:0;
        padding-right: 2.667vw;
        top: -2vw;

    }
    #wrap .content .pr a{
        text-decoration: none;
        color: #000;
        font-size: 1.733vw;

    }
    .content .mt100{
        margin-top: 13.333vw;
    }
    .content .mt120{
        margin-top: 16vw;
    }
    .w_gif .gif01{
        position: absolute;
        top: 7.733vw;
        right: 11.6vw;
        width: 38.267vw;
    }
    .w_gif .gif02{
        position: absolute;
        top: 100.133vw;
        left: 11.867vw;
        width: 38.267vw;
    }
    .w_arrow{
        position: relative;
    }
    .arrows{
        position: absolute;
        height: 13.333vw;
        width: 100%;
        top: 78.667vw;
    }
    .arrows .first{
        animation: arrow-move08 2s ease-in-out infinite;
    }
    .arrows .second{
        animation: arrow-move08 2s 1s ease-in-out infinite;

    }
    .arrows .arrow img{
        width: 8vw;
    }
    .arrows .arrow{
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform-origin: 50% 50%;
        /*透明度（0=透明、1=不透明）*/
        opacity: 0;
    }
}