@charset "utf-8";
/*------------------------------------------------------------
    special/minigame-prize
------------------------------------------------------------*/


/* content_wrapper bg */
.special.minigame-prize .content_wrapper.-firework {
    background: url(../images/bg_detail.png) repeat left top / 510px 503px;
    background-color: #3a538b;
    padding-bottom: 15.6rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_wrapper.-firework {
        position: relative;
        background-position: left top 4.5rem;
        padding-bottom: 10.1rem;
    }

    .special.minigame-prize .content_wrapper.-firework:before {
        content: "";
        display: block;
        background: url(../images/bg_detail_top.png) no-repeat bottom right 7.62rem / contain;
        width: 100%;
        height: 10.1rem;
        background-color: rgb(58, 83, 139);
    }
}

.special.minigame-prize .content_wrapper.-green {
    position: relative;
    background:
        url(../images/bg_goods_bottom.png) no-repeat bottom center / contain,
        linear-gradient(0deg, rgb(24, 90, 67) 0%, rgb(92, 175, 139) 100%);
    padding-bottom: 8rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_wrapper.-green {
        padding-bottom: 2.2rem;
        background:
            url(../images/bg_goods_bottom_sp.png) no-repeat bottom center / contain,
            linear-gradient(0deg, rgb(24, 90, 67) 0%, rgb(92, 175, 139) 100%);
    }
}

.special.minigame-prize .content_wrapper.-green:before {
    content: "";
    position: absolute;
    display: block;
    height: 3rem;
    width: 100%;
    background: url(../images/bg_goods_top.png) repeat-x top left / 5rem;
    top: -2.9rem;
    left: 0;
}


/* kv_area */
.special.minigame-prize .kv_area {
    position: relative;
    padding-top: 3.3rem;
    background: linear-gradient(0deg, rgb(58, 83, 139) 0%, rgb(20, 36, 128) 100%);
}

@media all and (min-width: 520px) {
    .special.minigame-prize .kv_area {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: calc(41.7rem + (3.3rem + 5.5rem));
        padding-bottom: 5.5rem;
    }

    .special.minigame-prize .kv_area:before {
        content: "";
        position: absolute;
        max-width: 121.6rem;
        width: 100%;
        aspect-ratio: 1216 / 417;
        background: url(../images/bg_kv.png) no-repeat left top / contain;
        margin: 0 0 0 3rem;
        mix-blend-mode: overlay;
    }
}

@media all and (max-width: 519px) {
    .special.minigame-prize .kv_area {
        height: auto;
        background: transparent;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.special.minigame-prize .kv_area .-title {
    position: relative;
    max-width: 54.1rem;
    margin: -1.5rem 0 0 -2.4rem;
}

@media all and (min-width: 520px) {

    .special.minigame-prize .kv_area .-title:before,
    .special.minigame-prize .kv_area .-title:after {
        content: "";
        position: absolute;
    }

    .special.minigame-prize .kv_area .-title:before {
        width: 19.3rem;
        height: 20.2rem;
        top: 2.1rem;
        left: -17.1rem;
        background: url(../images/kv_img01.png) no-repeat left top /contain;
    }

    .special.minigame-prize .kv_area .-title:after {
        width: 14rem;
        height: 14.2rem;
        bottom: -8.4rem;
        right: -17.2rem;
        background: url(../images/kv_img02.png) no-repeat left top /contain;
    }
}

@media all and (max-width: 519px) {
    .special.minigame-prize .kv_area .-title {
        background: none;
        margin: 0 auto auto;
    }
}

.special.minigame-prize .kv_area .-title>picture {
    display: flex;
    align-items: flex-start;
}

@media all and (min-width: 1220px) {
    .special.minigame-prize .kv_area .-title>picture {
        position: relative;
        left: 1.2rem;
    }
}

.special.minigame-prize .kv_area .-title img {
    display: block;
}

.special.minigame-prize .kv_area .-lead {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -21%;
    line-height: 3.3rem;
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .kv_area .-lead {
        font-size: 1.5rem;
        bottom: 6.1rem;
        line-height: 2.8rem;
    }
}

.special.minigame-prize .kv_area .warning_msg {
    position: relative;
    background-color: #FFD6DA;
    max-width: 67.5rem;
    padding: 1.6rem 0 1.6rem 2.8rem;
    margin: 0 auto 0;
    font-family: "Noto Sans JP", sans-serif;
    color: #F41700;
    font-size: 1.5rem;
    font-weight: 400;
    bottom: -9.3rem;
}

.special.minigame-prize .kv_area .warning_msg a {
    color: #F41700;
    text-decoration: underline;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .kv_area .warning_msg {
        margin-top: 0;
        padding: 1.4rem 2.3rem;
        padding-right: 0;
        bottom: auto;
    }
}

/* detail */
.special.minigame-prize .content_block.detail {}

.special.minigame-prize .content_block.detail .item {
    position: relative;
    margin-bottom: 6.3rem;
    padding: 0;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.detail .item {
        border-radius: 2.0rem;
        position: relative;
        margin-bottom: 9.5rem;
        padding: 0;
    }
}

.special.minigame-prize .content_block.detail .item:last-child {
    margin-bottom: 0;
}

.special.minigame-prize .content_block.detail .img_rank {
    position: absolute;
    width: 22rem;
    top: -2.8rem;
    left: 4.2rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.detail {
        margin-top: -3.16rem;
    }


    .special.minigame-prize .content_block.detail .img_rank {
        position: absolute;
        width: 13.5rem;
        top: -7rem;
        left: 1.8rem;
    }
}

.special.minigame-prize .content_block.detail .inner_block {
    display: flex;
    align-items: flex-start;
    padding-left: 6.4rem;
}


@media (min-width: 520px) {
    .special.minigame-prize .content_block.detail .num_c.col_layout .inner_block {
        padding: 23rem 10.2rem 4.1rem 6.4rem;
        flex-direction: column-reverse;
        gap: 4rem 0;
    }
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.detail .inner_block {
        flex-direction: column-reverse;
        padding-left: 0;
        padding-bottom: 3.2rem;
    }

    .special.minigame-prize .content_block.detail .num_c .inner_block {
        padding-bottom: 2.8rem;
    }
}

.special.minigame-prize .content_block.detail .inner_block .-txt {
    width: 45.3rem;
    flex-shrink: 0;
    margin-top: 19rem;
    margin-right: 1.6rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.detail .inner_block .-txt {
        width: auto;
        margin-top: 2.7rem;
        margin-right: 0;
        padding: 0 1.6rem;
    }
}

.special.minigame-prize .content_block.detail .num_a .-txt {
    margin-top: 19rem;
    margin-bottom: 5.1rem;
    display: grid;
    grid-template-columns: repeat(1, 0fr);
    grid-template-rows: repeat(1, 1fr);
    grid-template-areas:
        "main main"
        "manual spec";
}

.special.minigame-prize .content_block.detail .num_a .inner_block .-txt .inner_wrap {
    grid-area: main;
}

.special.minigame-prize .content_block.detail .num_a .inner_block .-txt .-spec {
    grid-area: spec;
    margin-top: auto;
    margin-bottom: 1.9rem;
}

.special.minigame-prize .content_block.detail .num_a .inner_block .-txt .-manual {
    position: relative;
    grid-area: manual;
    width: 15.6rem;
    margin-top: 1.2rem;
    margin-right: 2.4rem;
}

.special.minigame-prize .content_block.detail .num_a .inner_block .-txt .-manual>p {
    position: absolute;
    font-size: 1.6rem;
    font-weight: 900;
    color: #9079C3;
    right: -27.5rem;
    top: 2.3rem;
}

.special.minigame-prize .content_block.detail .num_a .inner_block .-txt .-manual>p:before {
    content: "";
    position: absolute;
    width: 5.0rem;
    height: 2.3rem;
    background: url(../images/detail_img_arrow.png) no-repeat center top / cover;
    transform: scale(1, -1);
    left: -5.7rem;
    top: 1rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.detail .num_a .-txt {
        margin-top: 2.5rem;
        margin-bottom: 0;
        display: block;
    }

    .special.minigame-prize .content_block.detail .num_a .inner_block .-txt .inner_wrap {}

    .special.minigame-prize .content_block.detail .num_a .inner_block .-txt .-spec {
        margin-top: 2.7rem;
        margin-bottom: 0;
    }

    .special.minigame-prize .content_block.detail .num_a .inner_block .-txt .-manual {
        margin-top: 2.2rem;
        margin-right: 0;
        margin-left: 1.4rem;
    }

    .special.minigame-prize .content_block.detail .num_a .inner_block .-txt .-manual>p {
        position: absolute;
        font-size: 1.6rem;
        font-weight: 900;
        color: #9079C3;
        top: auto;
        right: -14.9rem;
        bottom: 4.5rem;
        line-height: 1.8rem;
    }

    .special.minigame-prize .content_block.detail .num_a .inner_block .-txt .-manual>p:before {
        transform: scale(1);
        top: auto;
        left: -6.5rem;
        bottom: 0.4em;
    }
}

.special.minigame-prize .content_block.detail .num_b .-txt {
    margin-bottom: 7.1rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.detail .num_b .-txt {
        margin-top: 0.4rem;
        margin-bottom: 0;
    }
}

.special.minigame-prize .content_block.detail .num_c .-txt {
    margin-bottom: 2.4rem;
}

.special.minigame-prize .content_block.detail .num_c.col_layout .-txt {
    width: auto;
    margin: 0;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.detail .num_c .-txt {
        margin-top: 2.4rem;
        margin-bottom: 0;
    }
}


.special.minigame-prize .content_block.detail .inner_block .-txt .-title {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 4.7rem;
    color: #B00B52;
    margin-bottom: 2.2rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.detail .inner_block .-txt .-title {
        font-size: 2.4rem;
        line-height: 3.6rem;
    }
}


.special.minigame-prize .content_block.detail .inner_block .-txt .-spec {
    margin-top: 1em;
}

.special.minigame-prize .content_block.detail .num_c .-txt .indent_list {
    margin-top: 1em;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.detail .inner_block .-txt .-spec {
        margin-top: 0.4rem;
    }

    .special.minigame-prize .content_block.detail .num_c .-txt .-spec {
        margin-top: 1.6rem;
    }

    .special.minigame-prize .content_block.detail .num_c .-txt .indent_list {
        margin-top: 0.8rem;
    }
}

.special.minigame-prize .content_block.detail .inner_block .-img {
    position: relative;
    margin-left: auto;
}

.special.minigame-prize .content_block.detail .num_a .inner_block .-img {
    max-width: 57.8rem;
    margin-top: 6.5rem;
    margin-right: 4.9rem;
}

.special.minigame-prize .content_block.detail .num_b .inner_block .-img {
    max-width: 57.9rem;
    margin-top: 3.9rem;
    margin-right: 5.3rem;
}

.special.minigame-prize .content_block.detail .num_c .inner_block .-img {
    max-width: 45.8rem;
    margin-top: 9.2rem;
    margin-right: 10.2rem;
}

.special.minigame-prize .content_block.detail .num_c .inner_block .-img:last-child:after {
    content: "※ 画像はイメージです";
    display: block;
    font-size: 1.2rem;
    line-height: 1.6rem;
    margin-top: 1rem;
    color: rgba(0, 0, 0, 0.5);
    text-align: right;
}
.special.minigame-prize .content_block.detail .num_c .inner_block .-img .-ribbon {
    position: absolute;
    top: -5.8rem;
    left: -3.34rem;
    width: 100%;
    max-width: 20.3rem;
}

.special.minigame-prize .content_block.detail .num_c.col_layout .inner_block .img_wrapper {
    display: flex;
    flex-direction: row;
    gap: 0 6.4rem;
    padding-left: 3.8rem;
}

.special.minigame-prize .content_block.detail .num_c.col_layout .inner_block .-img {
    max-width: 45.8rem;
    margin: 0;
}

@media (min-width: 520px) and (max-width: 1247px) {
    .special.minigame-prize .content_block.detail .inner_block .-img {
        align-self: center;
    }

    .special.minigame-prize .content_block.detail .num_a .inner_block .-img {
        margin-top: 0;
        margin-right: 6.4rem;
    }

    .special.minigame-prize .content_block.detail .num_b .inner_block .-img {
        margin-top: 0;
        margin-right: 6.4rem;
    }

    .special.minigame-prize .content_block.detail .num_c .inner_block .-img {
        margin-top: 0;
        margin-right: 6.4rem;
    }

    .special.minigame-prize .content_block.detail .num_c.col_layout .inner_block .-img {
        align-self: flex-start;
    }
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.detail .item .inner_block .-img {
        margin-right: auto;
    }

    .special.minigame-prize .content_block.detail .num_a .inner_block .-img {
        padding: 0 0.8rem;
        margin-top: 5.4rem;
    }

    .special.minigame-prize .content_block.detail .num_b .inner_block .-img {
        padding: 0 1.4rem;
        margin-top: 5.7rem;
    }

    .special.minigame-prize .content_block.detail .num_c .inner_block .-img {
        padding: 0 2.7rem;
        margin-top: 11.5rem;
    }

    .special.minigame-prize .content_block.detail .num_c .inner_block .-img .-ribbon {
        top: -4.7rem;
        left: calc(2.7rem - 1.2rem);
        max-width: 15.4rem;
    }

    .special.minigame-prize .content_block.detail .num_c.col_layout .inner_block .img_wrapper {
        flex-direction: column;
        gap: 7rem 0;
        padding: 11.2rem 0 2.4rem 0;
    }

}


/* note */
.special.minigame-prize .content_block.note {
    font-family: "Noto Sans JP", sans-serif;
    position: relative;
    border: 1px solid #fff;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 4rem 3.2rem;
    margin-top: 5.5rem;
    color: #fff;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.note {
        margin-top: 4.4rem;
        padding: 2.4rem 1.6rem 5.3rem 2rem;
    }
}

.special.minigame-prize .content_block.note .-title {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 2.6rem;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2.4rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.note .-title {
        margin-bottom: 3rem;
    }
}

.special.minigame-prize .content_block.note .case_image {
    background-color: #fff;
    width: calc(100% - 1.4rem);
    padding: 2.1rem 3.2rem 2.8rem;
    margin: 2.5rem auto 0;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.note .case_image {
        padding: 4.1rem 0 2.8rem 2.9rem;
        width: auto;
        margin-top: 2.3rem;
    }
}

.special.minigame-prize .content_block.note .case_image .-title {
    color: #000;
    margin-bottom: 0.6rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.note .case_image .-title {
        margin-bottom: 2.6rem;
    }
}

.special.minigame-prize .content_block.note .case_image .date_list {
    position: relative;
    color: #000;
    font-weight: 700;
    display: flex;
    text-align: center;
}

.special.minigame-prize .content_block.note .case_image .date_list:before,
.special.minigame-prize .content_block.note .case_image .date_list::after {
    content: "";
    position: absolute;
    display: block;
}

.special.minigame-prize .content_block.note .case_image .date_list:before {
    width: calc(100% - 2.0rem);
    height: 2.0rem;
    top: calc(1em + 1.6rem);
    background-color: #FFE3AE;

}

.special.minigame-prize .content_block.note .case_image .date_list::after {
    width: 0;
    height: 0;
    background: transparent;
    border-style: solid;
    border-width: 2.6rem 0 2.6rem 3.1rem;
    border-color: transparent transparent transparent #FFE3AE;
    top: 1em;
    right: 0;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.note .case_image .date_list {
        display: block;
        text-align: left;
        padding-left: 4.3rem;
    }

    .special.minigame-prize .content_block.note .case_image .date_list:before {
        width: 2.1rem;
        height: calc(100% - 2.0rem);
        top: 0;
        left: 0.6rem;
    }

    .special.minigame-prize .content_block.note .case_image .date_list::after {
        top: auto;
        right: auto;
        left: -0.2rem;
        bottom: 0;
        border-width: 23px 19px 0 19px;
        border-color: #FFE3AE transparent transparent transparent;
    }
}

.special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(1) {
    margin-left: 3.037%;
}

.special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(2) {
    margin-left: 17.386%;
}

.special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(3) {
    margin-left: 5.222%;
}

@media all and (max-width: 1041px) {
    .special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(1) {
        margin-left: 2.3vw;
    }

    .special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(2) {
        margin-left: 11vw;
    }

    .special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(3) {
        margin-left: 4vw;
    }
}

@media all and (max-width: 519px) {

    .special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(1),
    .special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(2),
    .special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(3) {
        margin-left: 0;
        padding-top: 0.4rem;
    }

    .special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(2) {
        padding-top: 3.2rem;
    }

    .special.minigame-prize .content_block.note .case_image .date_list .item:nth-child(3) {
        padding-top: 1.0rem;
        padding-bottom: 3.4rem;
    }
}

.special.minigame-prize .content_block.note .case_image .date_list .-date {
    position: relative;
    color: #FF6600;
}

.special.minigame-prize .content_block.note .case_image .date_list .-date::after {
    content: "";
    position: relative;
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    background-color: #FF6600;
    border-radius: 100%;
    margin: 0.8rem auto 1.2rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.note .case_image .date_list .-date {
        margin-bottom: 0.1rem;
    }

    .special.minigame-prize .content_block.note .case_image .date_list .-date::after {
        position: absolute;
        margin: auto;
        top: 0.3rem;
        left: -3.5rem;
    }
}

.special.minigame-prize .content_block.note .case_image .date_list .-txt {
    letter-spacing: -0.05em;
    line-height: 2.2rem;
}


.special.minigame-prize .content_block.banner .banner_area {
    margin-top: 5.7rem;
    padding: 0 3.2rem;
    gap: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.banner .banner_area {
        flex-direction: column;
        margin-top: 3.4rem;
        gap: 4.8rem;
        padding: 0 0.8rem;
    }
}

.special.minigame-prize .content_block.banner .banner_area .img_link {
    display: block;
    transition: .3s;
}

@media all and (min-width: 520px) {
    .special.minigame-prize .content_block.banner .banner_area .img_link {
        width: 52.8rem;
    }
}

.special.minigame-prize .content_block.banner .banner_area .img_link:hover {
    transform: translateY(-1rem);
}

.special.minigame-prize .content_block.banner .banner_area .img_link>img {
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16);
    border-radius: 1.6rem;
}

.special.minigame-prize .content_block.banner .btn_area {
    margin-top: 5.5rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.banner .btn_area {
        margin-top: 4.8rem;
    }
}

.special.minigame-prize .content_block.banner .btn_area .btn {
    font-family: "Noto Sans JP", sans-serif;
    height: 5.2rem;
    max-width: 43.5rem;
    background-color: #FF6600;
}

.special.minigame-prize .content_block.banner .btn_area .btn:hover {
    background-color: #E35700;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.banner .btn_area .btn {
        width: 32.3rem;
        height: auto;
        padding: 1.2rem 0 1.6rem;
    }
}

/* goods */
.special.minigame-prize .content_block.goods {
    position: relative;
    padding-top: 5.2rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.goods {
        padding-top: 2.9rem;
    }
}

.special.minigame-prize .content_block.goods .-title {
    max-width: 49.6rem;
    margin: 0 auto 1.6rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.goods .-title {
        width: 23.6rem;
    }
}

.special.minigame-prize .content_block.goods .-txt {
    text-align: center;
}

.special.minigame-prize .content_block.goods .btn_area {
    position: relative;
    margin-top: 3.8rem;
    z-index: 1;
}

.special.minigame-prize .content_block.goods .btn_area .btn {
    background-color: #932cfc;
}

.special.minigame-prize .content_block.goods .btn_area .btn:hover {
    background-color: #6E00DE;
}

.special.minigame-prize .content_block.goods .img_area {
    position: relative;
    padding: 0;
    margin-top: 8.0rem;
}

.special.minigame-prize .content_block.goods .img_area .img {
    width: 81.2rem;
    position: relative;
    margin: auto;
    left: -5.6rem;
}

@media all and (max-width: 519px) {
    .special.minigame-prize .content_block.goods .img_area {
        margin-top: 2.6rem;
    }

    .special.minigame-prize .content_block.goods .img_area .img {
        width: 33.15rem;
        left: auto;
    }
}