@charset "shift_jis";

header,main,footer,div,p,ul,ol,li,nav {padding: 0;margin: 0;}

.banner {padding: 90px 0 95px;background: #1E2887 url(../image-style/winxvideo-ai-jp/bg1.jpg) no-repeat center/cover;}
.banner-wrap {width: 1200px;margin: 0 auto;}
.banner-content {position: relative;}
.banner-videos>li {display: none;position: relative;background-color: #000;border-radius: 24px;overflow: hidden;}
.banner-videos>li.active {display: block;}
.banner-videos>li::before {content: "";display: block;padding-top: 56.25%;}
.banner-videos>li>video {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.banner-toggles {position: absolute;top: 50%;right: 24px;transform: translateY(-50%);display: flex;flex-direction: column;align-items: center;gap: 42px;}
.banner-toggles>li {border-radius: 12px;overflow: hidden;position: relative;cursor: pointer;display: flex;}
.banner-toggles>li.active {box-shadow: 0 0 0 3px #fff;}
.banner-toggles>li>span {opacity: 0;transition: all 0.2s;line-height: 28px;width: 100%;text-align: center;background: linear-gradient(transparent, rgba(0,0,0,0.8));font-size: 17px;color: #fff;position: absolute;bottom: 0;left: 0;}
.banner-toggles>li:hover>span,.banner-toggles>li.active>span {opacity: 1;}
.banner-left {position: absolute;top: 0;left: 0;width: 50%;height: 100%;box-sizing: border-box;padding: 10px 150px 10px 32px;z-index: 1;border-radius: 24px 0 0 24px;background: linear-gradient(90deg, #26305c 60%, transparent);display: flex;flex-direction: column;align-items: flex-start;justify-content: center;}
h1 {font-size: 53px;color: #fff;line-height: 1.1;font-weight: 600;padding: 5px 0;border-top: 1px dashed #fff;border-bottom: 1px dashed #fff;margin: 10px 0;}
.banner-p {font-size: 15px;color: #fff;line-height: 1.3;padding-bottom: 10px;}
.banner-code {display: flex;align-items: center;gap: 4px;padding: 15px 0;}
.banner-code>img {flex-shrink: 0;}
.the-code {width: 257px;line-height: 32px;background-color: #fff;border: 2px solid #fff;font-size: 17px;color: #000;text-align: center;border-radius: 4px;}
.copy-code {width: 70px;line-height: 32px;text-align: center;font-weight: 600;font-size: 17px;color: #fff;border: 2px solid #fff;border-radius: 5px;background-color: #3fa7ff;outline: none;cursor: pointer;}
.banner-download,.banner-share {width: 100%;display: flex;padding: 0 0 12px 116px;}
.banner-download>a {width: 256px;line-height: 50px;text-align: center;border-radius: 100vw;font-size: 19px;color: #fff;font-weight: 600;background: linear-gradient(90deg, #217aff, #69b7ff);}
.banner-share {padding: 12px 0 12px 116px;}
.banner-share>a {width: 256px;height: 50px;display: flex;justify-content: center;align-items: center;border-radius: 100vw;background-color: #000;font-size: 19px;color: #fff;font-weight: 600;}
.banner-share>a::before {content: "";width: 27px;height: 24px;background: url(../image-style/winxvideo-ai-jp/banner-x-icon.png);}
.banner-countdown {width: 100%;display: flex;justify-content: center;align-items: center;gap: 12px;flex-wrap: wrap;}
.banner-countdown>img {flex-shrink: 0;}
.digiarty-timer {display: flex;gap: 14px;}
.digiarty-timer>li {font-size: 32px;color: #fff;line-height: 1;position: relative;}
.digiarty-timer>li::after {content: attr(data-word);font-size: 18px;display: inline-block;vertical-align: middle;margin-left: 3px;}
.digiarty-timer>li+li::before {content: ":";font-size: 28px;line-height: 1;position: absolute;top: 50%;margin-top: -17px;left: -10px;}
@media (max-width:1200px){
    .banner {background-color: #000;padding-top: 50px;}
    .banner-wrap {width: 96%;}
    .banner-left {position: static;text-align: center;display: block;width: 100%;padding: 0 0 20px;background: none; }
    .banner-left>img {max-width: 100%;}
    .banner-toggles {width: 100%;position: static;flex-direction: row;justify-content: center;gap: 20px;flex-wrap: wrap;transform: none;padding-top: 10px;}
    .banner-code {justify-content: center;flex-wrap: wrap;gap: 10px;}
    .banner-download,.banner-share {justify-content: center;padding: 0 0 12px;}
    .banner-share>a {background-color: rgba(255,255,255,0.15);}
}

.scroll {padding: 52px 0 0;background-color: #080e20;position: relative;height: 250vh;}
.scroll-wrap {width: 1200px;margin: 0 auto;position: sticky;top: 0;}
.scroll-top {display: flex;justify-content: space-between;align-items: flex-end;flex-wrap: wrap;gap: 50px;border-bottom: 1px solid #212737;}
.scroll-titles>li {display: none;position: relative;}
.scroll-titles>li.active {display: block;}
.scroll-titles>li::after {content: "";width: 209px;height: 6px;background-color: #6e5baf;position: absolute;bottom: -1px;left: 0;}
.scroll-titles>li:nth-child(2)::after {background-color: #c1473d;}
.scroll-titles>li:nth-child(3)::after {background-color: #c36c0f;}
.scroll-titles>li:nth-child(4)::after {background-color: #2d65b8;}
.scroll-h2 {font-size: 37px;color: #fff;line-height: 1;font-weight: 600;}
.scroll-title-intro {padding: 18px 0 30px 20px;}
.scroll-title-intro>li {font-size: 21px;color: #b1b1b1;line-height: 1;list-style-type: disc;padding-bottom: 8px;}
.scroll-lists {padding-bottom: 5px;width: 590px;}
.scroll-lists>li {font-size: 17px;color: #b1b1b1;line-height: 1.1;padding: 0 0 12px 22px;background: url(../image-style/winxvideo-ai-jp/scroll-star.png) no-repeat left 4px;}
.scroll-lists>li>b {font-size: 19px;color: #fff;}
.scroll-bottom {padding-top: 130px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 16px;}
.scroll-videos {width: 1158px;}
.scroll-videos>li {display: none;position: relative;}
.scroll-videos>li.active {display: block;}
.scroll-video-img {position: absolute;top: -100px;right: 150px;z-index: 1;}
.scroll-video-img>img {max-width: 100%;}
.scroll-video {position: relative;background-color: #000;border-radius: 20px;overflow: hidden;}
.scroll-video::before {content: "";display: block;padding-top: 41.66667%;}
.scroll-video::after {content: "";width: 100%;height: 80px;background: linear-gradient(transparent, #080e20);position: absolute;left: 0;bottom: 0;}
.scroll-video>video {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.scroll-video-logo {width: 100%;text-align: center;display: flex;justify-content: center;align-items: flex-end;gap: 15px;flex-wrap: wrap;margin-top: -55px;position: relative;}
.scroll-video-logo>b {font-size: 30px;color: #ff9a17;line-height: 1;padding-bottom: 5px;position: relative;}
.scroll-video-logo>b.right {color: #5ca5ff;}
.scroll-video-logo>b.right>span {padding: 0 9px;line-height: 22px;font-size: 13px;color: #fff;background: linear-gradient(90deg, #d532f6, #2cdfff);border-radius: 20px 0 20px 0;position: absolute;right: -40px;bottom: 110%;}
.scroll-dots {display: flex;flex-direction: column;justify-content: center;gap: 13px;}
.scroll-dots>li {width: 9px;height: 9px;border-radius: 5px;background: #c5c5c5;transition: all 0.2s;}
.scroll-dots>li.active {height: 55px;background: linear-gradient(#64a5ff, #3867ff);}
@media (max-width:1200px){
    .scroll {height: auto;}
    .scroll-wrap {width: 96%;}
    .scroll-top {border-bottom: none;}
    .scroll-lists {width: 100%;}
    .scroll-titles {order: 2;width: 100%;display: flex;justify-content: center;flex-wrap: wrap;gap: 20px;}
    .scroll-titles>li {display: block;width: 340px;box-sizing: border-box;padding: 15px 10px;border-radius: 10px;border: 1px solid #fff;cursor: pointer;}
    .scroll-h2 {font-size: 23px;text-align: center;}
    .scroll-titles>li:nth-child(1) .scroll-h2 {color: #6e5baf;}
    .scroll-titles>li:nth-child(2) .scroll-h2 {color: #c1473d;}
    .scroll-titles>li:nth-child(3) .scroll-h2 {color: #c36c0f;}
    .scroll-titles>li:nth-child(4) .scroll-h2 {color: #2d65b8;}
    .scroll-title-intro {padding: 10px 0 10px 20px;}
    .scroll-title-intro>li {font-size: 17px;}
    .scroll-titles>li::after {display: none;}
    .scroll-bottom {padding-top: 30px;}
    .scroll-videos {width: 100%;}
    .scroll-dots {display: none;}
    .scroll-video-img {position: static;width: 100%;text-align: center;padding-bottom: 20px;}
    .scroll-video-logo {margin-top: 0;}
    .scroll-video-logo>b.right>span {position: static;display: inline-block;vertical-align: middle;}
    .scroll-video-logo>b {font-size: 21px;}
}

.sale {padding: 100px 0 60px;background-color: #080e20;}
.sale-wrap {width: 1200px;margin: 0 auto;display: flex;justify-content: center;align-items: flex-start;gap: 30px;flex-wrap: wrap;}
.sale-left {width: 570px;}
.sale-img {width: 470px;padding-bottom: 16px;border-bottom: 2px solid #212737;}
.sale-h2 {font-size: 61px;line-height: 1;color: #fff;font-weight: 600;padding: 22px 0 82px;}
.sale-h2>span {font-size: 19px;color: #878787;line-height: 1;display: block;padding-top: 16px;}
.sale-intros {border-left: 1px dashed #535763;margin-left: 18px;}
.sale-intros>li+li {padding-top: 40px;}
.sale-intros>li {display: flex;align-items: center;gap: 12px;position: relative;}
.sale-intros>li:first-child::before,.sale-intros>li:last-child::before {content: "";height: 50%;width: 1px;background-color: #080e20;position: absolute;top: 0;left: -1px;}
.sale-intros>li:last-child::before {top: auto;bottom: 0;}
.sale-intro-icon {width: 105px;box-sizing: border-box;padding-left: 38px;flex-shrink: 0;position: relative;}
.sale-intro-icon::before {content: "";width: 34px;height: 34px;border-radius: 50%;background-color: #38c248;position: absolute;top: 50%;margin-top: -17px;left: -17px;}
.sale-intro-icon::after {content: "";width: 7px;height: 15px;border-right: 2px solid #fff;border-bottom: 2px solid #fff;transform: rotate(45deg);position: absolute;left: -4px;top: 50%;margin-top: -10px;}
.sale-info-h3 {font-size: 21px;color: #fff;line-height: 1.1;padding-bottom: 8px;}
.sale-info-p {font-size: 13px;color: #9a9a9a;line-height: 1.6;}
.sale-right {width: 600px;display: flex;justify-content: center;align-items: center;gap: 12px;flex-wrap: wrap;}
.sale-card-one,.sale-card-two {width: 290px;box-sizing: border-box;border-radius: 10px;text-align: center;}
.sale-card-one {padding: 28px 0 42px;background: #fafbff radial-gradient(circle closest-side, #fff 100%, #fafbff) no-repeat center -170px/300px 300px;}
.sale-card-two {padding: 16px 0 42px;background: #fff radial-gradient(circle closest-side, #fff8e5 100%, #fff) no-repeat center -120px/300px 300px;}
.sale-card-title {font-size: 15px;color: #3c3c3c;line-height: 1;text-align: center;font-weight: 600;}
.sale-card-two .sale-card-title {color: #8f6b5d;padding-top: 6px;}
.sale-card-price {font-size: 42px;color: #257cff;line-height: 1;padding: 18px 0 36px;}
.sale-card-two .sale-card-price {color: #ff9000;padding-bottom: 55px;}
.sale-card-price>del {display: block;font-size: 16px;color: #8f6c5e;line-height: 1;padding-top: 8px;}
.sale-card-lists {padding: 0 15px;}
.sale-card-two .sale-card-lists {padding: 0 20px;}
.sale-card-lists>li {font-size: 15px;color: #2c2c2c;line-height: 1.3;padding: 12px 0 12px 27px;position: relative;text-align: left;}
.sale-card-lists>li+li {border-top: 1px solid #e6e8ef;}
.sale-card-lists>li::before {content: "";width: 20px;height: 19px;background: url(../image-style/winxvideo-ai-jp/sale-checked-icon.png) no-repeat center top;position: absolute;left: 0;top: 50%;margin-top: -10px;}
.sale-card-lists>li.no::before {background-position-y: bottom;}
.sale-card-lists>li>span {color: #ff9000;}
.sale-card-code {width: 250px;line-height: 38px;border: 2px dashed #8fbbff;border-radius: 10px;text-align: center;font-size: 15px;color: #000;font-weight: 600;margin: 24px auto;}
.sale-card-btns {display: flex;justify-content: center;}
.sale-card-two .sale-card-btns {margin: 24px 0 14px;}
.sale-card-btn {min-width: 225px;line-height: 35px;box-sizing: border-box;padding: 0 2px;border: 2px solid #257cff;border-radius: 100vw;margin: 0 auto;font-size: 17px;color: #257cff;font-weight: 600;display: flex;justify-content: flex-end;align-items: center;}
.sale-card-btn>span {flex-grow: 1;text-align: center;}
.sale-card-two .sale-card-btn {min-width: 260px;border-color: #ffb83c;background-color: #ffb83c;color: #fff;font-size: 16px;}
.sale-card-btn::after {content: "";width: 33px;height: 33px;background-image: url(../image-style/winxvideo-ai-jp/sale-download.png);}
.sale-card-two .sale-card-btn::after {background-image: url(../image-style/winxvideo-ai-jp/sale-buy.png);}
.sale-card-bottom-p>a {font-size: 11px;color: #2e78ff;line-height: 1;text-decoration: underline;text-underline-position: under;}
@media (max-width:1200px){
    .sale-wrap {width: 96%;}
    .sale-left {width: 100%;text-align: center;}
    .sale-h2 {padding-bottom: 22px;}
    .sale-img {width: 100%;}
    .sale-intros {margin-left: 0;border-left: none;text-align: left;}
    .sale-intros>li:first-child::before, .sale-intros>li:last-child::before {display: none;}
    .sale-intro-icon {width: 67px;padding-left: 0;}
    .sale-intro-icon::before,.sale-intro-icon::after {display: none;}
}
@media (max-width:767px) {
    .sale-h2 {font-size: 27px;}
}
@media (max-width:620px) {
    .sale-card-one,.sale-card-two {width: 100%;}
}

.video {padding: 70px 0 90px;background-color: #000212;overflow: hidden;}
.video-wrap {width: 1200px;margin: 0 auto;}
.video-h2 {font-size: 35px;color: #fff;line-height: 1;text-align: center;}
.video-h2>span {color: #ffb135;}
.video-list {display: flex;justify-content: center;flex-wrap: wrap;gap: 70px;padding: 22px 0 42px;}
.video-icon {font-size: 16px;color: #999;line-height: 1.1;display: flex;align-items: center;gap: 16px;position: relative;}
.video-icon::before {content: "";}
.video-icon.icon1::before {width: 23px;height: 30px;background-image: url(../image-style/winxvideo-ai-jp/icon1.svg);}
.video-icon.icon2::before {width: 29px;height: 29px;background-image: url(../image-style/winxvideo-ai-jp/icon2.svg);}
.video-icon.icon3::before {width: 24px;height: 28px;background-image: url(../image-style/winxvideo-ai-jp/icon3.svg);}
.video-icon+.video-icon::after {content: "";width: 1px;height: 36px;background-color: #323643;position: absolute;top: 50%;left: -35px;margin-top: -18px;}
.video-toggle-items {width: fit-content;margin: 0 auto 46px;background-color: #000;border: 1px solid #14172e;border-radius: 100vw;display: flex;justify-content: center;font-size: 17px;}
.video-toggle-items>li {width: 150px;line-height: 32px;color: #7a7b80;text-align: center;cursor: pointer;border-radius: 100vw;}
.video-toggle-items>li.active {color: #2490ff;box-shadow: 0 0 0 1px #2490ff;}
.video-toggle-items>li:hover {color: #2490ff;}
.video-content {position: relative;}
.video-content::before,.video-content::after {content: "";width: 700px;height: 700px;background: radial-gradient(farthest-side, #131e4d, transparent);position: absolute;top: 0;left: -350px;}
.video-content::after {left: auto;right: -350px;}
.video-content-box {display: flex;justify-content: center;flex-wrap: wrap;border-radius: 18px;overflow: hidden;position: relative;z-index: 1;}
.video-left {width: 880px;}
.video-left>li {position: relative;display: none;background-color: #000;}
.video-left>li.active {display: block;}
.video-left>li::before {content: "";display: block;padding-bottom: 56.25%;}
.video-left>li>video {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.video-content-p {max-width: 326px;box-sizing: border-box;padding: 16px;border-radius: 10px;font-size: 15px;line-height: 1.8;color: #b9c3d6;background-color: rgba(19,30,77,0.38);position: absolute;bottom: 16px;left: 16px;}
.video-right {width: 320px;box-sizing: border-box;padding: 15px 10px;background-color: #02030c;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.video-right-h3 {font-size: 23px;line-height: 1;font-weight: 500;color: #ffb135;}
.video-right-p {font-size: 15px;color: #bcbcbc;line-height: 1;padding: 6px 0 18px;}
.video-right-price {font-size: 17px;color: #393a42;line-height: 25px;padding: 16px 0 12px;}
.video-right-price>span {font-size: 25px;color: #ff9500;}
.video-right-price>del {color: #6e728b;}
.buy-buttons {display: flex;justify-content: center;}
.buy-button {min-width: 212px;height: 44px;box-sizing: border-box;padding: 0 10px;border-radius: 100vw;background-color: #ff9500;display: flex;justify-content: center;align-items: center;gap: 15px;font-size: 21px;color: #fff;font-weight: 600;text-decoration: none;}
.buy-button:hover {color: #fff;}
.buy-button::after {content: "";width: 32px;height: 29px;background: url(../image-style/winxvideo-ai-jp/buy-car.png);}
.buy-service {display: flex;justify-content: center;align-items: center;gap: 8px;font-size: 14px;color: #54586f;line-height: 1.2;padding-top: 16px;text-align: left;}
.buy-service::before {content: "";width: 33px;height: 25px;background: url(../image-style/winxvideo-ai-jp/buy-service.png);}
.video-params {padding-top: 70px;display: flex;justify-content: center;flex-wrap: wrap;border-bottom: 1px solid #272a3d;}
.video-params>li {padding: 0 34px 26px;display: flex;flex-direction: column;align-items: center;gap: 10px;position: relative;}
.video-params>li+li::before {content: "";height: 100%;width: 1px;background: linear-gradient(transparent, #272a3d);position: absolute;bottom: 0;left: 0;}
.video-params-h3 {font-size: 35px;line-height: 1;font-weight: 500;background: linear-gradient(90deg, #399bff, #1874ff);-webkit-background-clip: text; background-clip: text;-webkit-text-fill-color: transparent; color: transparent;}
.video-params-p {font-size: 17px;color: #42567a;line-height: 1.3;}
.step-content {border-radius: 12px;border: 4px solid #2490ff;background-color: #fff;padding: 48px 10px 72px;margin: 40px 0 45px;text-align: center}
.step-h2 {font-size: 35px;line-height: 1;font-weight: 600;color: #000;padding-bottom: 30px;}
.step-items {display: flex;justify-content: center;flex-wrap: wrap;}
.step-items>li {display: flex;flex-direction: column;align-items: center;gap: 20px;padding: 0 6px;position: relative;}
.step-items>li::before {content: "";width: 60%;border-top: 1px dashed #a6bbff;position: absolute;top: 17px;right: 0;}
.step-items>li:nth-child(2):before {width: 100%;}
.step-items>li:nth-child(3):before {right: auto;left: 0;}
.step-items>li+li::after {content: "";border-left: 12px solid #a6bbff;border-bottom: 10px solid transparent;border-top: 10px solid transparent;position: absolute;top: 8px;left: -6px;}
.step-items .step-num {min-width: 90px;line-height: 36px;box-sizing: border-box;padding: 0 8px;border-radius: 100vw;background-color: #6b8eff;font-size: 19px;color: #fff;position: relative;}
.step-btns {display: flex;justify-content: center;}
.step-btn {min-width: 470px;box-sizing: border-box;padding: 0 10px;line-height: 52px;font-size: 17px;color: #fff;text-align: center;border-radius: 100vw;background: linear-gradient(90deg, #217aff, #6ab7ff);}
.step-btn::before {content: "";width: 14px;height: 15px;background-image: url(../image-style/winxvideo-ai-jp/button-link-icon.png);display: inline-block;vertical-align: middle;margin-right: 8px;transition: all 0.2s;}
.step-btn:hover::before {content: "";margin-right: 12px;}
@media (max-width:1200px) {
    .video-wrap {width: 96%;}
    .video-list {gap: 30px;}
    .video-icon::after {display: none;}
    .video-toggle-items {flex-wrap: wrap;border: none;margin-bottom: 20px;}
    .video-toggle-items>li {width: auto;padding: 0 20px;}
    .video-content-box {border-radius: 0;}
    .video-content::before, .video-content::after {display: none;}
    .video-left {border-radius: 18px;overflow: hidden;margin-bottom: 20px;}
    .video-content-p {padding: 10px;line-height: 1.3;left: 10px;bottom: 10px;}
    .video-right {background-color: transparent;}
    .video-params>li+li::before {display: none;}
    .step-content {padding: 30px 5px;}
    .step-items {gap: 20px;}
    .step-items>li::before,.step-items>li::after {display: none;}
    .step-btn {min-width: auto;padding: 0 15px;}
}
@media (max-width:767px) {
    .video-h2,.step-h2,.video-params-h3 {font-size: 27px;}
}

.rules {padding:80px 0;background-color: #fff;}
.rules-wrap {width: 1200px;margin: 0 auto;}
.rules-title {text-align:center;color:#340e0e;height:65px;width:620px;margin:0 auto;display:flex;justify-content:center;align-items:center;background-color:#FF993F;border-top-left-radius:30px;border-top-right-radius:30px;font-size:30px;font-weight:700;}
.rules-content {background-color:#ffffff;border:6px solid #FF993F;box-sizing:border-box;border-radius:30px;overflow:hidden;}
.rules-scroll {height:500px;overflow-y:scroll;padding:45px 30px;}
.rules-content h3 {background-color:#FF993F;font-size:17px;font-weight:700;margin-bottom:10px;padding:3px 10px 0;margin-top:20px;}
.rules-content p {font-size:17px;margin-bottom:10px;color:#000000;padding-left:10px;}
@media (max-width:1200px){
    .rules-wrap {width: 96%;}
}
@media (max-width:979px){
    .rules-title {width:100%;font-size:25px;}
    .rules-content {border-top-left-radius:0;border-top-right-radius:0;}
    .rules-scroll {padding:15px;}
}
@media (max-width:576px){
    .rules-content p {font-size:15px;}
}