@charset "UTF-8";

.mv {
    position: relative;
    padding-top: 16vw;
    padding-bottom: 7vw;
}

@media only screen and (min-width: 768px) {
    .mv {
        padding-top: 6.145vw;
        padding-bottom: 5.83vw;
    }
}

.mv_bg {
    position: absolute;
    inset: 0;
}

.mv_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv_decorate {
    position: absolute;
    inset: 0;
}

.mv_decorate .item {
    position: absolute;
}

.mv_decorate .item:nth-child(1) {
    width: 11%;
    max-width: 140px;
    top: 12.8%;
    left: 9.1%;
}

.mv_decorate .item:nth-child(1) img {
    scale: -1 1;
    rotate: 21deg;
    opacity: 0.7;
}

.mv_decorate .item:nth-child(2) {
    width: 11%;
    max-width: 173px;
    top: 18.5%;
    left: 84.7%;
}

.mv_decorate .item:nth-child(2) img {
    rotate: -30deg;
}

.mv_decorate .item:nth-child(3) {
    width: 11%;
    max-width: 156px;
    top: 65.7%;
    left: 2.9%;
}

.mv_decorate .item:nth-child(3) img {
    scale: -1 1;
}

.mv_decorate .item img {
    width: 100%;
}

.mv_box {
    width: 480px;
    max-width: calc(100% - 100px);
    aspect-ratio: 1.3775510204;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .mv_box {
        width: 1215px;
        max-width: calc(100% - 200px);
    }
}

.mv_caption {
    width: 64.0329218107%;
    position: absolute;
    bottom: 0;
    left: 47.5%;
    translate: -50% 0;
}

@media only screen and (min-width: 768px) {
    .mv_caption {
        width: 64.0329218107%;
        bottom: -9px;
    }
}

.mv_caption img {
    width: 100%;
}

.mv_ver {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mv_ver .item {
    position: absolute;
}

.mv_ver .item:nth-child(1) {
    width: 20%;
    max-width: 212px;
    right: -9%;
    bottom: 23.2%;
}

.mv_ver .item:nth-child(2) {
    width: 25%;
    max-width: 283px;
    right: -0.7%;
    bottom: 4.8%;
}

.mv_ver .item img {
    width: 100%;
}

.mv_cloud {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.mv_cloud::after {
    content: "";
    width: 100%;
    height: 15px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: -13px;
}

.mv_cloud_item {
    display: flex;
}

.mv_cloud_item img {
    width: 100%;
}

.mv_cloud_item img:nth-child(1) {
    mix-blend-mode: multiply;
}

.mv_cloud_item img:nth-child(2) {
    position: absolute;
    left: 0;
    bottom: 0;
}

.mv_certificate {
    width: 240px;
    position: absolute;
    top: 100%;
    left: 2%;
}

@media only screen and (min-width: 768px) {
    .mv_certificate {
        max-width: 30%;
        width: 393px;
        top: 86%;
    }
}

.character {
    position: relative;
    padding-top: 30px;
    padding-bottom: 50px;
    border-bottom: 4px solid #000;
}

@media only screen and (min-width: 768px) {
    .character {
        border-bottom-width: 10px;
        padding-top: 65px;
        padding-bottom: 108px;
    }
}

.character_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #f6f6f6 0%, #fff 100%);
}

.character_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("./../image/neomon/img_cell_01.webp");
    background-size: 40px 40px;
    background-repeat: repeat;
}

@media only screen and (min-width: 768px) {
    .character_bg::after {
        background-size: 101px 101px;
    }
}

@media only screen and (min-width: 768px) {
    .character_heading {
        padding-left: 8px;
    }
}

.character_slide .item {
    margin-left: 10px;
    margin-right: 10px;
}

@media only screen and (min-width: 768px) {
    .character_slide .item {
        margin-left: 30px;
        margin-right: 30px;
    }
}

.character_slide_ref {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
}

@media only screen and (min-width: 768px) {
    .character_slide_ref {
        padding: 12px 44px 19px 52px;
    }
}

.character_slide_ref .item {
    width: calc(25% - 8px);
    position: relative;
    border-radius: 15px;
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .character_slide_ref .item {
        width: calc(12.5% - 9px);
        border-radius: 30px;
    }

    .character_slide_ref .item:hover::after {
        opacity: 0;
    }
}

.character_slide_ref .item.is_active {
    pointer-events: none;
}

.character_slide_ref .item.is_active::before {
    opacity: 1;
}

.character_slide_ref .item.is_active::after {
    opacity: 0;
}

.character_slide_ref .item::after,
.character_slide_ref .item::before {
    content: "";
    width: 100%;
    position: absolute;
    aspect-ratio: 1;
    border-radius: 28%;
    transition: 350ms ease-out;
}

.character_slide_ref .item::before {
    inset: 0;
    opacity: 0;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #029c3d;
}

@media only screen and (min-width: 768px) {
    .character_slide_ref .item::before {
        box-shadow: 0 0 0 5px #029c3d;
    }
}

.character_slide_ref .item::after {
    background-color: #000;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
    opacity: 0.5;
}

.character_slider_group {
    width: 100%;
    max-width: calc(100% - 30px);
    position: relative;
    margin-top: 29px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .character_slider_group {
        width: 1060px;
        max-width: calc(100% - 100px);
    }
}

.character_slider_group::after,
.character_slider_group::before {
    content: "";
    width: calc(100% - 20px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 10px;
    border-radius: 3%;
}

@media only screen and (min-width: 768px) {

    .character_slider_group::after,
    .character_slider_group::before {
        width: calc(100% - 60px);
        left: 30px;
        border-radius: 30px;
        border-radius: 3%;
    }
}

.character_slider_group::before {
    z-index: -1;
    background-color: #fff;
}

.character_slider_group::after {
    z-index: 1;
    box-shadow: 0 0 0 3px #000;
    pointer-events: none;
}

@media only screen and (min-width: 768px) {
    .character_slider_group::after {
        box-shadow: 0 0 0 5px #000;
    }
}

.character_slider_main {
    position: relative;
}

.character_slider_main .slick-list {
    overflow: visible;
}

.concept {
    padding-top: 80px;
}

@media only screen and (min-width: 768px) {
    .concept {
        padding-top: 53px;
    }
}

@media only screen and (min-width: 768px) {
    .concept_heading {
        padding-left: 10px;
    }
}

.concept_back {
    position: relative;
    margin-top: 20px;
}

@media only screen and (min-width: 768px) {
    .concept_back {
        max-width: 1144px;
        margin-top: 35px;
        margin-left: auto;
        margin-right: auto;
    }
}

.concept_back .item_group__01 {
    width: 80%;
    margin-left: auto;
}

@media only screen and (min-width: 768px) {
    .concept_back .item_group__01 {
        width: 72%;
        max-width: 808px;
        margin-right: 10px;
    }
}

.concept_back .item_group__02 {
    width: 76%;
    margin-left: auto;
}

@media only screen and (min-width: 768px) {
    .concept_back .item_group__02 {
        max-width: 864px;
    }
}

.concept_back .item_group__03 {
    width: 39%;
    position: absolute;
    z-index: -1;
    left: -3%;
    bottom: -2px;
}

@media only screen and (min-width: 768px) {
    .concept_back .item_group__03 {
        left: -2.2%;
        max-width: 442px;
    }
}

.concept_back .item_group__03 .item_figure:nth-child(2) {
    width: 84%;
    position: absolute;
    left: 5.6%;
    bottom: 0;
}

@media only screen and (min-width: 768px) {
    .concept_back .item_group__03 .item_figure:nth-child(2) {
        width: 78.5388127854%;
    }
}

.concept_fun {
    position: relative;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
}

@media only screen and (min-width: 768px) {
    .concept_fun {
        margin-top: -2px;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }
}

.concept_fun .item_group__01 {
    width: 100%;
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom: 4px solid #000;
}

@media only screen and (min-width: 768px) {
    .concept_fun .item_group__01 {
        padding-top: 13px;
        padding-bottom: 8px;
        border-bottom-width: 10px;
    }
}

.concept_fun .item_group__01::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: 0.3;
}

.concept_fun .item_group__02 {
    width: 82%;
    position: absolute;
    z-index: 1;
    top: 52.9%;
    left: 49.5%;
    translate: -50% -50%;
}

@media only screen and (min-width: 768px) {
    .concept_fun .item_group__02 {
        width: 90%;
        max-width: 1440px;
        top: 52.9%;
        left: 49.5%;
    }
}

.concept_fun .item_group__03 {
    width: 100%;
    height: 30vw;
    display: block;
    position: relative;
    z-index: 0;
    background-image: linear-gradient(0deg, #f6f6f6 0%, #fff 100%);
}

@media only screen and (min-width: 768px) {
    .concept_fun .item_group__03 {
        max-height: 437px;
    }
}

.concept_fun .item_group__03::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("./../image/neomon/img_cell_01.webp");
    background-size: 40px 40px;
    background-repeat: repeat;
}

@media only screen and (min-width: 768px) {
    .concept_fun .item_group__03::after {
        background-size: 101px 101px;
    }
}

.expect {
    position: relative;
    padding-top: 30px;
    border-bottom: 4px solid #000;
}

@media only screen and (min-width: 768px) {
    .expect {
        padding-top: 57px;
        border-bottom-width: 10px;
    }
}

.expect_main {
    padding-bottom: 60px;
}

@media only screen and (min-width: 768px) {
    .expect_main {
        padding-bottom: 147px;
    }
}

.expect_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #f6f6f6 50%, #fff 100%);
}

.expect_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.6;
    background-image: url("./../image/neomon/img_cell_01.webp");
    background-size: 40px 40px;
    background-repeat: repeat;
}

@media only screen and (min-width: 768px) {
    .expect_bg::after {
        background-size: 101px 101px;
    }
}

@media only screen and (min-width: 768px) {
    .expect_heading {
        padding-left: 7px;
    }
}

.expect_leading {
    width: 82%;
    margin-top: 6px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .expect_leading {
        width: 62%;
        max-width: 794px;
    }
}

.expect_leading img {
    width: 100%;
}

.expect_slider_group {
    margin-left: -20px;
    margin-right: -20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media only screen and (min-width: 768px) {
    .expect_slider_group {
        width: 853px;
        max-width: calc(100% - 100px);
        margin-left: auto;
        margin-right: auto;
        padding-top: 37px;
        padding-bottom: 37px;
    }
}

.expect_slider {
    width: 360px;
    max-width: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .expect_slider {
        width: 804px;
    }
}

.expect_slider_arrow {
    width: 100%;
    left: 0;
}

@media only screen and (min-width: 768px) {
    .expect_slider_arrow {
        width: 107.2%;
        top: 46%;
        left: -5.6%;
    }
}

.expect_slide .slick-list {
    overflow: visible;
}

.expect_slide .item {
    aspect-ratio: 0.9779179811;
    position: relative;
    margin-left: 40px;
    margin-right: 40px;
}

@media only screen and (min-width: 768px) {
    .expect_slide .item {
        margin-left: 92px;
        margin-right: 92px;
    }
}

.expect_slide .item_01 .item_thumb {
    width: 128.4%;
    top: 0%;
    left: -17.9%;
}

.expect_slide .item_02 .item_thumb {
    width: 133.5%;
    top: 0%;
    left: -12.2%;
}

.expect_slide .item_03 .item_thumb {
    width: 139.3%;
    top: 0%;
    left: -16.5%;
}

@media only screen and (min-width: 768px) {
    .expect_slide .item_03 .item_thumb {
        left: -19.5%;
    }
}

.expect_slide .item_thumb {
    position: absolute;
}

.expect_slide .item_new::after {
    content: "";
    width: 46px;
    aspect-ratio: 2.1494252874;
    background-image: url("./../image/neomon/img_new.webp");
    background-size: 100%;
    position: absolute;
    top: -3%;
    left: 2.7%;
    rotate: -15deg;
}

@media only screen and (min-width: 768px) {
    .expect_slide .item_new::after {
        width: 107px;
        max-width: 30%;
    }
}

.expect_slide .item_familiar::after {
    content: "";
    width: 120px;
    aspect-ratio: 2.1494252874;
    background-image: url("./../image/neomon/img_familiar.webp");
    background-size: 100%;
    position: absolute;
    top: -5.8%;
    left: -8.5%;
    rotate: -11deg;
}

@media only screen and (min-width: 768px) {
    .expect_slide .item_familiar::after {
        width: 187px;
        max-width: 50%;
    }
}

.expect_other_main {
    position: relative;
    padding-top: 30px;
    padding-bottom: 40px;
    border-bottom: 4px solid #000;
}

@media only screen and (min-width: 768px) {
    .expect_other_main {
        padding-top: 83px;
        padding-bottom: 52px;
        border-bottom-width: 10px;
    }
}

.expect_other_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #f5f5f5 0%, #e6e6e6 100%);
}

.expect_other_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("./../image/neomon/img_cell_00.webp");
    background-size: 40px 40px;
    background-repeat: repeat;
}

@media only screen and (min-width: 768px) {
    .expect_other_bg::after {
        background-size: 101px 101px;
    }
}

.expect_other_leading {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .expect_other_leading {
        max-width: 800px;
    }
}

.expect_other_leading img {
    width: 100%;
}

.expect_other_grid {
    width: 480px;
    max-width: calc(100% - 40px);
    display: flex;
    gap: 20px;
    flex-direction: column;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 1024px) {
    .expect_other_grid {
        width: 1300px;
        max-width: calc(100% - 40px);
        flex-direction: row;
        gap: 58px;
        margin-top: 42px;
    }
}

.expect_other_grid .item {
    width: 100%;
    aspect-ratio: 0.8051948052;
    position: relative;
}

.expect_other_grid .item:nth-child(1) .item_thumb {
    width: 117.8%;
    top: 0%;
    left: -7%;
}

.expect_other_grid .item:nth-child(2) .item_thumb {
    width: 115.3%;
    top: 0%;
    left: 0%;
}

.expect_other_grid .item_thumb {
    position: absolute;
}

.expect_surprise {
    position: relative;
    padding-top: 30px;
    padding-bottom: 40px;
}

@media only screen and (min-width: 768px) {
    .expect_surprise {
        padding-top: 52px;
        padding-bottom: 72px;
    }
}

.expect_surprise_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #f6f6f6 60%, #fff 100%);
}

.expect_surprise_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.6;
    background-image: url("./../image/neomon/img_cell_01.webp");
    background-size: 40px 40px;
    background-repeat: repeat;
}

@media only screen and (min-width: 768px) {
    .expect_surprise_bg::after {
        background-size: 101px 101px;
    }
}

.expect_surprise_leading {
    width: 260px;
    max-width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .expect_surprise_leading {
        width: 55%;
        max-width: 586px;
    }
}

.expect_surprise_leading img {
    width: 100%;
}

.expect_surprise_main {
    width: 70%;
    max-width: 480px;
    aspect-ratio: 1.3333333333;
    position: relative;
    margin-top: 35px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .expect_surprise_main {
        width: 70%;
        max-width: 800px;
        margin-top: 69px;
    }
}

.expect_surprise_main .decorate,
.expect_surprise_main .decorate_dot {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.expect_surprise_main .decorate .item,
.expect_surprise_main .decorate_dot .item {
    position: absolute;
}

.expect_surprise_main .decorate img,
.expect_surprise_main .decorate_dot img {
    width: 100%;
}

.expect_surprise_main .decorate_dot {
    z-index: -1;
}

.expect_surprise_main .decorate_dot .item:nth-child(1) {
    width: 65%;
    max-width: 506px;
    top: 25.9%;
    left: -26.7%;
}

.expect_surprise_main .decorate_dot .item:nth-child(2) {
    width: 55%;
    max-width: 419px;
    top: -9.6%;
    left: 70.8%;
}

.expect_surprise_main .decorate {
    z-index: 1;
}

.expect_surprise_main .decorate .item:nth-child(1) {
    width: 40%;
    max-width: 312px;
    right: -16.4%;
    bottom: -14.8%;
}

.expect_surprise_main .item_thumb {
    width: 138%;
    position: absolute;
    top: -19.7%;
    left: -23.7%;
}

.mode {
    position: relative;
    padding-top: 30px;
    padding-bottom: 50px;
}

@media only screen and (min-width: 768px) {
    .mode {
        padding-top: 45px;
        padding-bottom: 84px;
    }
}

.mode_bg {
    background-image: linear-gradient(0deg, #029c3d 0%, #6fc86c 100%);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    inset: 0;
    z-index: -1;
    border-bottom: 4px solid #000;
}

@media only screen and (min-width: 768px) {
    .mode_bg {
        border-bottom-width: 10px;
    }
}

.mode_bg::after {
    content: "";
    background-image: url("../image/neomon/img_cell_02.webp");
    background-size: 16px 16px;
    background-repeat: repeat;
    position: absolute;
    inset: 0;
    opacity: 0.1;
}

@media only screen and (min-width: 768px) {
    .mode_bg::after {
        background-size: 47px 47px;
    }
}

.mode_leading {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .mode_leading {
        width: 60%;
        max-width: 690px;
        margin-top: -35px;
    }
}

.mode_leading img {
    width: 100%;
}

.mode_grid {
    display: flex;
    flex-direction: column;
    gap: 56px;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .mode_grid {
        flex-direction: row;
        margin-top: -8px;
        margin-right: -6px;
        padding-left: 2px;
    }
}

.mode_grid .item_group {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 0.7730673317;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .mode_grid .item_group {
        width: calc(50% - 28px);
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.mode_grid .item_group:nth-child(1) .item_thumb {
    width: 104%;
    top: 0;
    left: -4%;
}

.mode_grid .item_group:nth-child(2) .item_thumb {
    width: 102%;
    top: 0;
    left: -2%;
}

.mode_grid .item_thumb {
    position: absolute;
}

.mode_grid .item_change {
    width: 50%;
    max-width: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

@media only screen and (min-width: 768px) {
    .mode_grid .item_change {
        width: 22%;
        max-width: 267px;
        top: 45%;
    }
}

.mode_grid .item_change img {
    width: 100%;
}

.surprise {
    position: relative;
    padding-top: 22px;
    border-bottom: 4px solid #000;
}

@media only screen and (min-width: 768px) {
    .surprise {
        border-bottom-width: 10px;
    }
}

.surprise_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #1da651 0%, #6ec76b 100%);
}

.surprise_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: url("./../image/neomon/img_cell_03.webp");
    background-size: 100px 100px;
    background-repeat: repeat;
}

@media only screen and (min-width: 768px) {
    .surprise_bg::after {
        background-size: 336px 336px;
    }
}

.surprise_box {
    width: 480px;
    max-width: calc(100% - 60px);
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media only screen and (min-width: 768px) {
    .surprise_box {
        width: 90%;
        max-width: 1300px;
    }
}

.surprise_decorate_dot {
    position: absolute;
    inset: 0;
}

.surprise_decorate_dot .item {
    width: 70%;
    position: absolute;
}

.surprise_decorate_dot .item:nth-child(1) {
    top: 12%;
    left: 52%;
}

@media only screen and (min-width: 768px) {
    .surprise_decorate_dot .item:nth-child(1) {
        width: 39%;
        max-width: 506px;
        top: 9%;
        left: 17.1%;
    }
}

.surprise_decorate_dot .item:nth-child(2) {
    top: 35%;
    left: -20%;
}

@media only screen and (min-width: 768px) {
    .surprise_decorate_dot .item:nth-child(2) {
        width: 33%;
        max-width: 418px;
        top: 5.6%;
        left: 73.8%;
    }
}

.surprise_decorate_dot .item:nth-child(3) {
    top: 58%;
    left: 52%;
}

@media only screen and (min-width: 768px) {
    .surprise_decorate_dot .item:nth-child(3) {
        width: 37%;
        max-width: 477px;
        top: 57.9%;
        left: -8.8%;
    }
}

.surprise_decorate_dot .item:nth-child(4) {
    top: 80%;
    left: -20%;
}

@media only screen and (min-width: 768px) {
    .surprise_decorate_dot .item:nth-child(4) {
        width: 33%;
        max-width: 417px;
        top: 56.7%;
        left: 46.9%;
    }
}

.surprise_decorate_dot .item img {
    width: 100%;
}

.surprise_decorate {
    position: absolute;
    inset: 0;
}

.surprise_decorate .item {
    position: absolute;
}

.surprise_decorate .item:nth-child(1) {
    width: 100%;
    max-width: 400px;
    top: -1%;
    left: 50%;
    translate: -50% 0;
    z-index: -1;
}

@media only screen and (min-width: 768px) {
    .surprise_decorate .item:nth-child(1) {
        width: 41%;
        max-width: 528px;
        top: -1.8%;
        left: 55.9%;
        translate: none;
    }
}

.surprise_decorate .item:nth-child(2) {
    width: 40%;
    top: 25.5%;
    left: 18%;
}

@media only screen and (min-width: 768px) {
    .surprise_decorate .item:nth-child(2) {
        width: 21%;
        max-width: 270px;
        top: 38.3%;
        left: 5.6%;
    }
}

.surprise_decorate .item:nth-child(3) {
    width: 36%;
    top: 47.5%;
    left: 50%;
}

@media only screen and (min-width: 768px) {
    .surprise_decorate .item:nth-child(3) {
        width: 22%;
        max-width: 286px;
        top: 50.6%;
        left: 71.3%;
    }
}

.surprise_decorate .item:nth-child(4) {
    width: 85%;
    max-width: 320px;
    left: -6.6%;
    bottom: -2px;
    z-index: -1;
}

@media only screen and (min-width: 768px) {
    .surprise_decorate .item:nth-child(4) {
        width: 52%;
        max-width: 670px;
        left: -6.6%;
        bottom: -8px;
    }
}

.surprise_decorate .item:nth-child(4).is_show img {
    animation: kf_character_decorate_01 3s linear 0s 1 both;
}

.surprise_decorate .item img {
    width: 100%;
}

.surprise_leading {
    width: 280px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .surprise_leading {
        width: 33%;
        max-width: 429px;
        position: absolute;
        top: -0.9%;
        left: 64.3%;
        rotate: -16deg;
        margin: 0;
    }
}

.surprise_leading img {
    width: 100%;
}

.surprise_grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    padding-bottom: 160px;
}

@media only screen and (min-width: 768px) {
    .surprise_grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-direction: row;
        gap: 0 30px;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-top: 77px;
        padding-bottom: 75px;
    }
}

@media only screen and (min-width: 1024px) {
    .surprise_grid {
        gap: 0 clamp(4rem, 3.4722222222vw + 0.4444444444rem, 6rem);
    }
}

.surprise_grid .item_group {
    width: 100%;
    aspect-ratio: 1.0689655172;
    position: relative;
}

.surprise_grid .item_group:nth-child(1) .item_thumb {
    width: 125.5%;
    top: -11.2%;
    left: -13.3%;
}

@media only screen and (min-width: 768px) {
    .surprise_grid .item_group:nth-child(2) {
        margin-top: 180px;
    }
}

.surprise_grid .item_group:nth-child(2) .item_thumb {
    width: 130.8%;
    top: -8.9%;
    left: -17%;
}

@media only screen and (min-width: 768px) {
    .surprise_grid .item_group:nth-child(2) .item_thumb {
        left: -14.1%;
    }
}

@media only screen and (min-width: 768px) {
    .surprise_grid .item_group:nth-child(3) {
        margin-top: -14px;
    }
}

.surprise_grid .item_group:nth-child(3) .item_thumb {
    width: 120%;
    top: -8.8%;
    left: -10.5%;
}

@media only screen and (min-width: 768px) {
    .surprise_grid .item_group:nth-child(3) .item_thumb {
        left: -11.6%;
    }
}

@media only screen and (min-width: 768px) {
    .surprise_grid .item_group:nth-child(4) {
        margin-top: 196px;
    }
}

.surprise_grid .item_group:nth-child(4) .item_thumb {
    width: 118%;
    top: -7.5%;
    left: -8%;
}

@media only screen and (min-width: 768px) {
    .surprise_grid .item_group:nth-child(4) .item_thumb {
        left: -6.6%;
    }
}

.surprise_grid .item_thumb {
    position: absolute;
}

@keyframes kf_character_decorate_01 {
    from {
        translate: -130% 0;
    }

    to {
        translate: 0 0;
    }
}

.special {
    position: relative;
    border-bottom: 4px solid #000;
}

@media only screen and (min-width: 768px) {
    .special {
        border-bottom-width: 10px;
    }
}

.special .decorate_character {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.special .decorate_character .item:nth-child(1) {
    width: 30%;
    max-width: 100px;
    position: absolute;
    left: calc(50% - 160px);
    bottom: -2.8%;
}

@media only screen and (min-width: 768px) {
    .special .decorate_character .item:nth-child(1) {
        width: 80%;
        max-width: 258px;
        left: calc(50% - 390px);
    }
}

.special .decorate_character .item img {
    width: 100%;
}

.special_main {
    padding-top: 30px;
    padding-bottom: 80px;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .special_main {
        padding-top: 53px;
        padding-bottom: 153px;
    }
}

.special_main_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #1da651 0%, #6ec76b 100%);
}

.special_main_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: url("./../image/neomon/img_cell_03.webp");
    background-size: 100px 100px;
    background-repeat: repeat;
    background-position: bottom left;
}

@media only screen and (min-width: 768px) {
    .special_main_bg::after {
        background-size: 336px 336px;
    }
}

.special_main_block {
    width: 90%;
    max-width: 480px;
    aspect-ratio: 1.213592233;
    position: relative;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .special_main_block {
        width: 80%;
        max-width: 1000px;
        margin-top: 42px;
    }
}

.special_main_block .decorate,
.special_main_block .decorate_star {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.special_main_block .decorate .item,
.special_main_block .decorate_star .item {
    position: absolute;
}

.special_main_block .decorate img,
.special_main_block .decorate_star img {
    width: 100%;
}

.special_main_block .decorate_star {
    z-index: -1;
}

.special_main_block .decorate_star .item {
    width: 15%;
    max-width: 128px;
}

.special_main_block .decorate_star .item:nth-child(1) {
    left: -14.1%;
    bottom: -5.7%;
}

.special_main_block .decorate_star .item:nth-child(2) {
    top: 42%;
    right: -13%;
}

.special_main_block .decorate {
    z-index: 1;
}

.special_main_block .decorate .item:nth-child(1) {
    width: 35%;
    max-width: 336px;
    top: 13.3%;
    right: -19.4%;
}

.special_main_block .decorate .item:nth-child(2) {
    width: 32%;
    max-width: 308px;
    bottom: -26%;
    left: 50%;
    translate: -50% 0;
}

.special_main_block .item_thumb {
    width: 118%;
    position: absolute;
    top: -0.5%;
    left: -5.7%;
}

.special_slider {
    position: relative;
}

.special_slider_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #029c3d 0%, #01782e 100%);
}

.special_slider_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: url("./../image/neomon/img_cell_03.webp");
    background-size: 100px 100px;
    background-repeat: repeat;
}

@media only screen and (min-width: 768px) {
    .special_slider_bg::after {
        background-size: 336px 336px;
    }
}

.special_slider_wrap {
    max-width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media only screen and (min-width: 768px) {
    .special_slider_wrap {
        width: 853px;
        max-width: calc(100% - 200px);
        margin-left: auto;
        margin-right: auto;
        padding-top: 51px;
        padding-bottom: 40px;
    }
}

.special_slider_leading {
    width: 244px;
    max-width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .special_slider_leading {
        width: 80%;
        max-width: 602px;
    }
}

.special_slider_leading img {
    width: 100%;
}

.special_slider_arrow {
    top: 37%;
    width: 100%;
    left: 0;
}

@media only screen and (min-width: 768px) {
    .special_slider_arrow {
        width: 106.5%;
        left: -2.1%;
    }
}

.special_slider_group {
    width: 400px;
    max-width: calc(100% - 20px);
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

@media only screen and (min-width: 768px) {
    .special_slider_group {
        width: 750px;
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.special_slide .slick-list {
    overflow: visible;
}

.special_slide .item {
    aspect-ratio: 0.9779179811;
    position: relative;
    margin-left: 25px;
    margin-right: 25px;
}

@media only screen and (min-width: 768px) {
    .special_slide .item {
        margin-left: 65px;
        margin-right: 65px;
    }
}

.special_slide .item_01 .item_thumb {
    width: 114.7%;
    top: -4.1%;
    left: -1.3%;
}

.special_slide .item_02 .item_thumb {
    width: 114.5%;
    top: -3.6%;
    left: 0.2%;
}

.special_slide .item_03 .item_thumb {
    width: 112.5%;
    top: -3.7%;
    left: -0.3%;
}

.special_slide .item_thumb {
    position: absolute;
}

.special_slide .item_new::after {
    content: "";
    width: 46px;
    aspect-ratio: 2.1494252874;
    background-image: url("./../image/neomon/img_new.webp");
    background-size: 100%;
    position: absolute;
    top: 0%;
    left: 2.4%;
    rotate: -15deg;
}

@media only screen and (min-width: 768px) {
    .special_slide .item_new::after {
        width: 107px;
        max-width: 30%;
    }
}

.special_slide .item_familiar::after {
    content: "";
    width: 120px;
    aspect-ratio: 2.1494252874;
    background-image: url("./../image/neomon/img_familiar.webp");
    background-size: 100%;
    position: absolute;
    top: -5.8%;
    left: -8.5%;
    rotate: -11deg;
}

@media only screen and (min-width: 768px) {
    .special_slide .item_familiar::after {
        width: 187px;
        max-width: 50%;
    }
}

.chance {
    position: relative;
    border-bottom: 4px solid #000;
}

@media only screen and (min-width: 768px) {
    .chance {
        border-bottom-width: 10px;
    }
}

.chance_main {
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media only screen and (min-width: 768px) {
    .chance_main {
        padding-top: 50px;
        padding-bottom: 155px;
    }
}

.chance_main_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #f6f6f6 60%, #fff 100%);
}

.chance_main_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.6;
    background-image: url("./../image/neomon/img_cell_01.webp");
    background-size: 40px 40px;
    background-repeat: repeat;
    background-position: bottom left;
}

@media only screen and (min-width: 768px) {
    .chance_main_bg::after {
        background-size: 101px 101px;
    }
}

.chance_main_leading {
    width: 294px;
    max-width: calc(100% - 40px);
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .chance_main_leading {
        width: 60%;
        max-width: 710px;
    }
}

.chance_main_leading img {
    width: 100%;
}

.chance_main_grid {
    width: 80%;
    max-width: 480px;
    display: flex;
    gap: 40px;
    flex-direction: column;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .chance_main_grid {
        width: 90%;
        max-width: 1300px;
        flex-direction: row;
        margin-top: 50px;
    }
}

.chance_main_grid .item {
    width: 100%;
    aspect-ratio: 0.9779179811;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .chance_main_grid .item {
        width: calc(50% - 20px);
    }
}

.chance_main_grid .item:nth-child(1) .item_thumb {
    width: 111.5%;
    top: 0;
    left: -8.8%;
}

.chance_main_grid .item:nth-child(2) .item_thumb {
    width: 110.6%;
    top: 0;
    left: -6%;
}

.chance_main_grid .item_thumb {
    width: 100%;
    position: absolute;
}

.chance_main_grid .item_new_mode::after {
    content: "";
    width: 140px;
    max-width: 35%;
    aspect-ratio: 3.3958333333;
    background-image: url("../image/neomon/img_new_mode.webp");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -4px;
    left: 50%;
    translate: -50% -50%;
}

@media only screen and (min-width: 768px) {
    .chance_main_grid .item_new_mode::after {
        width: 172px;
        top: 0;
    }
}

.chance_other {
    position: relative;
    padding-top: 30px;
}

@media only screen and (min-width: 768px) {
    .chance_other {
        padding-top: 60px;
    }
}

.chance_other_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #fff 0%, #e6e6e6 100%);
}

.chance_other_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("./../image/neomon/img_cell_00.webp");
    background-size: 40px 40px;
    background-repeat: repeat;
}

@media only screen and (min-width: 768px) {
    .chance_other_bg::after {
        background-size: 101px 101px;
    }
}

.chance_other_inner {
    max-width: 480px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media only screen and (min-width: 768px) {
    .chance_other_inner {
        max-width: 1040px;
        margin-top: 29px;
    }
}

.chance_other_leading {
    width: 254px;
    max-width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .chance_other_leading {
        width: 80%;
        max-width: 846px;
    }
}

.chance_other_leading img {
    width: 100%;
}

.chance_other_lib {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .chance_other_lib {
        max-width: 1000px;
    }
}

.chance_other_lib.is_open .item_content::after {
    content: "";
    opacity: 0;
}

.chance_other_lib.is_open .item_btn img:nth-child(1) {
    opacity: 0;
    transition-delay: 300ms;
}

.chance_other_lib.is_open .item_btn img:nth-child(2) {
    opacity: 1;
}

.chance_other_lib+.chance_other_lib {
    margin-top: 30px;
}

@media only screen and (min-width: 768px) {
    .chance_other_lib+.chance_other_lib {
        margin-top: 50px;
    }
}

.chance_other_lib .item_group {
    border-radius: 15px;
    border: 3px solid #000;
    position: relative;
    overflow: hidden;
}

@media only screen and (min-width: 768px) {
    .chance_other_lib .item_group {
        border-radius: 30px;
        border-width: 5px;
    }
}

.chance_other_lib .item_title {
    padding: 6px 10px;
    background-image: linear-gradient(0deg, #029c3d 0%, #0acb03 100%);
}

@media only screen and (min-width: 768px) {
    .chance_other_lib .item_title {
        padding: 17px 10px 12px;
    }
}

.chance_other_lib .item_title img {
    height: 26px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .chance_other_lib .item_title img {
        height: 50px;
    }
}

.chance_other_lib .item_content {
    background-color: #fff;
    position: relative;
    padding: 10px 10px 100px;
}

@media only screen and (min-width: 768px) {
    .chance_other_lib .item_content {
        padding: 27px 27px 130px 30px;
    }
}

.chance_other_lib .item_content::after {
    content: "";
    width: 100%;
    height: 200px;
    background-image: linear-gradient(0deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: 300ms ease-out;
}

@media only screen and (min-width: 768px) {
    .chance_other_lib .item_content::after {
        height: 300px;
    }
}

.chance_other_lib .item_grid {
    display: flex;
    gap: 7px 8px;
    flex-wrap: wrap;
}

.chance_other_lib .item_grid .item {
    width: calc(33.33% - 6px);
}

@media only screen and (min-width: 768px) {
    .chance_other_lib .item_grid .item {
        width: calc(20% - 7px);
    }
}

.chance_other_lib .item_state {
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 20px;
}

@media only screen and (min-width: 768px) {
    .chance_other_lib .item_state {
        bottom: 40px;
    }
}

.chance_other_lib .item_btn {
    width: 60%;
    max-width: 348px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    transition: 300ms linear;
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .chance_other_lib .item_btn {
        width: 60%;
        max-width: 351px;
    }

    .chance_other_lib .item_btn:hover {
        opacity: 0.6;
    }
}

.chance_other_lib .item_btn img {
    width: 100%;
    transition: opacity 300ms ease-out;
}

.chance_other_lib .item_btn img:nth-child(2) {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0;
}

.chance_other_character {
    width: 120px;
    height: 50px;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .chance_other_character {
        width: 80%;
        max-width: 320px;
        height: 94px;
    }
}

.chance_other_character .item_thumb {
    width: 100%;
    position: absolute;
    left: -24%;
    bottom: -14px;
}

@media only screen and (min-width: 768px) {
    .chance_other_character .item_thumb {
        bottom: -38%;
    }
}

.gameflow {
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 4px solid #000;
}

@media only screen and (min-width: 768px) {
    .gameflow {
        padding-top: 43px;
        padding-bottom: 92px;
        border-bottom-width: 10px;
    }
}

.gameflow_bg {
    background-image: linear-gradient(0deg, #029c3d 0%, #6fc86c 100%);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    inset: 0;
    z-index: -1;
}

.gameflow_bg::after {
    content: "";
    background-image: url("../image/neomon/img_cell_02.webp");
    background-size: 16px 16px;
    background-repeat: repeat;
    position: absolute;
    inset: 0;
    opacity: 0.1;
}

@media only screen and (min-width: 768px) {
    .gameflow_bg::after {
        background-size: 47px 47px;
    }
}

.gameflow_tab {
    max-width: 480px;
    background-color: rgba(255, 255, 255, 0.7);
    position: relative;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 6px 10px;
    border-radius: 15px;
}

@media only screen and (min-width: 768px) {
    .gameflow_tab {
        max-width: 1000px;
        margin-top: 31px;
        padding: 70px 20px 44px;
        border-radius: 30px;
    }
}

.gameflow_tab::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.7;
    border-radius: 15px;
    border: 4px solid #fff;
}

@media only screen and (min-width: 768px) {
    .gameflow_tab::before {
        border-radius: 30px;
        border-width: 10px;
    }
}

.gameflow_tab_buttons {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

@media only screen and (min-width: 768px) {
    .gameflow_tab_buttons {
        max-width: 623px;
        gap: 21px;
    }
}

.gameflow_tab_buttons .item {
    width: calc(50% - 5px);
    height: 42px;
    border: 2px solid #000;
    border-radius: 99px;
    position: relative;
    filter: drop-shadow(2px 5px 0 rgba(0, 0, 0, 0.5));
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .gameflow_tab_buttons .item {
        width: calc(50% - 11px);
        height: 62px;
        border-width: 3px;
        transition: 300ms ease-out;
    }

    .gameflow_tab_buttons .item:hover {
        box-shadow: none;
    }
}

.gameflow_tab_buttons .item.is_open {
    filter: none;
    box-shadow: none;
    pointer-events: none;
}

.gameflow_tab_buttons .item_199 {
    background-image: linear-gradient(0deg, #569bb1 0%, #89e3ef 100%);
    box-shadow: inset -3px -8px 0 0 #006277;
}

.gameflow_tab_buttons .item_99 {
    background-image: linear-gradient(0deg, #029c3d 0%, #0acb03 100%);
    box-shadow: inset -3px -8px 0 0 #005822;
}

.gameflow_tab_buttons .item img {
    height: 36px;
    position: absolute;
    top: -20%;
    left: 50%;
    translate: -50% 0;
}

@media only screen and (min-width: 768px) {
    .gameflow_tab_buttons .item img {
        height: 60px;
    }
}

.gameflow_tab_item {
    width: 100%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .gameflow_tab_item {
        max-width: 636px;
        margin-top: 21px;
    }
}

.gameflow_tab_item .item {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 300ms linear;
}

.gameflow_tab_item .item.is_open {
    position: relative;
    opacity: 1;
}

.spec {
    position: relative;
    padding-top: 30px;
    padding-bottom: 40px;
}

@media only screen and (min-width: 768px) {
    .spec {
        padding-top: 62px;
        padding-bottom: 102px;
    }
}

.spec_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #f6f6f6 60%, #fff 100%);
}

.spec_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.6;
    background-image: url("./../image/neomon/img_cell_01.webp");
    background-size: 40px 40px;
    background-repeat: repeat;
    background-position: bottom left;
}

@media only screen and (min-width: 768px) {
    .spec_bg::after {
        background-size: 101px 101px;
    }
}

.spec_grid {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 40px 60px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 1024px) {
    .spec_grid {
        max-width: 100%;
        flex-direction: row;
        margin-top: 57px;
    }
}

.spec_grid .item {
    width: 100%;
    aspect-ratio: 0.7469879518;
    position: relative;
}

@media only screen and (min-width: 1024px) {
    .spec_grid .item {
        width: calc(50% - 30px);
    }
}

.spec_grid .item_thumb {
    position: absolute;
    width: 103.3%;
    top: -1%;
    left: -2.3%;
}

.download {
    background-color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media only screen and (min-width: 768px) {
    .download {
        padding-top: 55px;
        padding-bottom: 107px;
    }
}

.download_block {
    max-width: 480px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    position: relative;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 20px 40px;
}

@media only screen and (min-width: 768px) {
    .download_block {
        max-width: 1000px;
        border-radius: 30px;
        margin-top: 40px;
        padding: 40px 36px 76px;
    }
}

.download_block::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.7;
    border-radius: 15px;
    border: 4px solid #fff;
    pointer-events: none;
}

@media only screen and (min-width: 768px) {
    .download_block::before {
        border-radius: 30px;
        border-width: 10px;
    }
}

.download_block_leading {
    width: 224px;
    max-width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .download_block_leading {
        width: 80%;
        max-width: 600px;
    }
}

.download_block_leading img {
    width: 100%;
}

.download_block_lists {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}

@media only screen and (min-width: 768px) {
    .download_block_lists {
        gap: 33px 30px;
        margin-top: 39px;
    }
}

.download_block_lists .item {
    width: calc(50% - 3px);
}

@media only screen and (min-width: 768px) {
    .download_block_lists .item {
        width: calc(33.33% - 20px);
    }
}

.download_block_lists .item img {
    width: 100%;
    display: block;
}

.download_block_note {
    margin-top: 20px;
}

@media only screen and (min-width: 768px) {
    .download_block_note {
        margin-top: 53px;
        padding-left: 10px;
        padding-right: 8px;
    }
}

.download_block_note .item {
    display: flex;
    align-items: baseline;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4285714286;
}

.download_block_note .item::before {
    content: "●";
    flex-shrink: 0;
    margin-right: 5px;
}

.download_block_note .item+.item {
    margin-top: 20px;
}

.download_block .decorate_character {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.download_block .decorate_character .item {
    width: 120px;
    position: absolute;
    right: -10px;
    bottom: -35px;
}

@media only screen and (min-width: 768px) {
    .download_block .decorate_character .item {
        width: 30%;
        max-width: 268px;
        right: -1.7%;
        bottom: -11.4%;
    }
}

.download_block .decorate_character .item img {
    width: 100%;
}

.movie {
    padding-top: 30px;
    padding-bottom: 40px;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .movie {
        padding-top: 52px;
        padding-bottom: 47px;
    }
}

.movie_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(0deg, #1da651 0%, #6ec76b 100%);
}

.movie_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: url("./../image/neomon/img_cell_03.webp");
    background-size: 100px 100px;
    background-repeat: repeat;
    background-position: bottom left;
}

@media only screen and (min-width: 768px) {
    .movie_bg::after {
        background-size: 336px 336px;
    }
}

.movie_block {
    width: 100%;
    max-width: 480px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .movie_block {
        width: 80%;
        max-width: 1006px;
        margin-top: 34px;
    }
}

.movie_block::before,
.movie_block::after {
    content: "";
    width: 60px;
    position: absolute;
    z-index: -1;
    background-size: 100%;
    background-repeat: no-repeat;
}

@media only screen and (min-width: 768px) {

    .movie_block::before,
    .movie_block::after {
        width: 20%;
    }
}

.movie_block::before {
    max-width: 131px;
    aspect-ratio: 0.448630137;
    background-image: url("../image/neomon/movie/img_de01.webp");
    left: -60px;
    bottom: 25px;
}

@media only screen and (min-width: 768px) {
    .movie_block::before {
        left: -14.6%;
        bottom: 18%;
    }
}

.movie_block::after {
    max-width: 107px;
    aspect-ratio: 0.3407643312;
    background-image: url("../image/neomon/movie/img_de02.webp");
    top: 10px;
    right: -50px;
}

@media only screen and (min-width: 768px) {
    .movie_block::after {
        top: 5%;
        right: -12.5%;
    }
}

.movie_block_video {
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    background-color: #000;
}

@media only screen and (min-width: 768px) {
    .movie_block_video {
        border-radius: 30px;
    }
}

.movie_block_video::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 3px solid #000;
    box-shadow: inset 0 0 0 3px #fff;
    border-radius: 15px;
}

@media only screen and (min-width: 768px) {
    .movie_block_video::after {
        border-width: 5px;
        border-radius: 30px;
        box-shadow: inset 0 0 0 5px #fff;
    }
}