@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

@font-face {
  font-family: 'GenEiLateGo';
  src: url('../font/GenEiLateGo_v2.woff') format('woff');
}
.color-rhythmic {color: #D200DD;}
.color-power {color: #F82500;}
.color-relax {color: #45970A;}

body {
    font-family: GenEiLateGo, sans-serif;
}

.is-mobile {
    display: block;
    @media (min-width: 768px) {
        display: none;
    }
}
.is-laptop {
    display: none;
    @media (min-width: 768px) {
        display: block;
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Title ------------------------ */
/* ------------------------------------------------------ */
.c-title {
    border-top: 1px solid #FFFFFF;
    background-image: linear-gradient(90deg, #F09CFD, #5593FF);
    text-align: center;
    padding-block: calc(16 * 100vw / 430);

    img {
        width: 100%;

        @media (min-width: 768px) {
            width: calc(1260 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            width: 1260px;
        }
    }

    @media (min-width: 768px) {
        padding-block: calc(35 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        padding-block: 35px;
    }
}
.c-title--feature {
    width: calc(380 * 100vw / 430);
    font-size: calc(24 * 100vw / 430);
    padding-block: 12px;
    margin-inline: auto;
    text-align: center;
    color: #FFFFFF;
    background-color: #000000;
    border: 4px solid;
    border-image: linear-gradient(to right, #F09CFD, #5593FF) 1;
    transform: skewX(-15deg);

    @media (min-width: 768px) {
        width: calc(900 * 100vw / 1920);
        font-size: calc(48 * 100vw / 1920);
        padding-block: calc(12 * 100vw / 1920);
        border-width: max( calc(4 * 100vw / 1920), 1px);
        border-style: solid;
    }
    @media (min-width: 1920px) {
        width: 900px;
        font-size: 48px;
        padding-block: 12px;
        border-width: 4px;
        border-style: solid;
    }

    span {
        display: inline-block;
        transform: skewX(15deg);
        background-image: linear-gradient(90deg, #F09CFD, #5593FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.c-title--news {
    font-size: calc(36 * 100vw / 430);
    border-bottom: 1px solid #93E0FF;

    @media (min-width: 768px) {
        font-size: calc(64 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        font-size: 64px;
    }

    span {
        display: inline-block;
        background-image: linear-gradient(90deg, #F09CFD, #5593FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}


/* ------------------------------------------------------ */
/* ----------------------- FAB -------------------------- */
/* ------------------------------------------------------ */
.l-fab {
    position: fixed;
    right: 3vw;
    bottom: 3vw;
    z-index: 10;

    @media (min-width: 768px) {
        right: 20px;
        bottom: 20px;
    }
    @media (min-width: 1920px) {
        right: 20px;
        bottom: 20px;
    }
}
.c-fab-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32vw;
    height: 32vw;
    background-image: url(../img/bg_fab.png);
    background-repeat: no-repeat;
    background-size: cover;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 7vw;
    line-height: 110%;

    @media (min-width: 768px) {
        width: 172px;
        height: 172px;
        font-size: 40px;
    }
    @media (min-width: 1920px) {
        width: 172px;
        height: 172px;
        font-size: 40px;
    }
}

#fabScroll {
    opacity: 0;
    transition: opacity 0.5s;
  }

  #fabScroll.is-visible {
    opacity: 1;
  }


/* ------------------------------------------------------ */
/* ----------------------- KV --------------------------- */
/* ------------------------------------------------------ */
.l-kv {
    position: relative;
    width: 100%;
    aspect-ratio: 430 / 990;
    background-image: url("../img/bg_kv_sp.png");
    background-repeat: no-repeat;
    background-size: cover;

    @media (min-width: 768px) {
        aspect-ratio: 1920 / 1080;
        background-image: url("../img/bg_kv.png");
    }
    @media (min-width: 1920px) {
    }
}
.c-kv-switch {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(62 * 100vw / 430);
    height: calc(62 * 100vw / 430);

    @media (min-width: 768px) {
        width: calc(152 * 100vw / 1920);
        height: calc(152 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
    }

    img {
        width: 100%;
        height: auto;
    }
}
.c-kv-movie {
    position: absolute;
    top: calc(676 * 100vw / 430);
    left: calc(42 * 100vw / 430);

    @media (min-width: 768px) {
        top: calc(313 * 100vw / 1920);
        left: calc(64 * 100vw / 1920);
    }

    h3 {
        font-size: calc(36 * 100vw / 430);
        line-height: 130%;
        color: #FFFFFF;
        text-align: center;

        @media (min-width: 768px) {
            font-size: calc(48 * 100vw / 1920);
        }
    }

    div {
        border: 4px solid #93E0FF;
        border-radius: 10px;
        overflow: hidden;
        width: calc(345 * 100vw / 430);

        @media (min-width: 768px) {
            width: calc(435 * 100vw / 1920);
        }

        img {
            width: 100%;
            height: auto;
        }
    }
}


/* ------------------------------------------------------ */
/* ----------------------- About ------------------------ */
/* ------------------------------------------------------ */
.l-about {
    .l-about__content {
        background-image: url("../img/bg_about.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        border-top: 1px solid #FFFFFF;
        padding-block: calc(48 * 100vw / 430);

        @media (min-width: 768px) {
            padding-block: calc(112 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            padding-block: 112px;
        }
    }

    .c-about-video {
        width: 80%;
        aspect-ratio: 16 / 9;
        margin-inline: auto;
        border: 6px solid #93E0FF;
        border-radius: 20px;
        overflow: hidden;

        img {
            width: 100%;
            height: auto;
        }

        @media (min-width: 768px) {
            width: calc(785 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            width: 785px;
        }
    }

    .c-about-text {
        text-align: center;
        font-size: calc(18 * 100vw / 430);
        line-height: 140%;
        color: #080EE1;
        -webkit-text-stroke: 3px #ffffff;
        text-stroke: 3px #ffffff;
        paint-order: stroke;
#        text-shadow: 0px 0px 8px #FFFFFF, 0px 0px 8px #FFFFFF;
        margin-top: calc(32 * 100vw / 430);

        @media (min-width: 768px) {
            font-size: calc(48 * 100vw / 1920);
            margin-top: calc(64 * 100vw / 1920);
            line-height: 130%;
            -webkit-text-stroke: 4px #ffffff;
            text-stroke: 4px #ffffff;
        }
        @media (min-width: 1920px) {
            font-size: 48px;
            margin-top: 64px;
        }
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Menu ------------------------- */
/* ------------------------------------------------------ */
.l-menu {
    .l-menu__content {
        background-image: linear-gradient(#FFFFFF, #D5E6E9 30%);
        text-align: center;
        padding-top: calc(50 * 100vw / 430);
        padding-bottom: calc(50 * 100vw / 430);

        @media (min-width: 768px) {
            background-image: linear-gradient(#FFFFFF, #D5E6E9);
            padding-top: calc(80 * 100vw / 1920);
            padding-bottom: calc(100 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            padding-top: 80px;
            padding-bottom: 100px;
        }
    }

    .c-menu-lists {
        width: calc(345 * 100vw / 430);
        margin-inline: auto;
        list-style: none;
        display: flex;
        gap: calc(30 * 100vw / 430);
        flex-flow: column;

        @media (min-width: 768px) {
            flex-flow: row;
            width: calc(1280 * 100vw / 1920);
            gap: calc(40 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            width: 1280px;
            gap: 40px;
        }

        .c-menu-list {
            width: 100%;
            background-color: #FFFFFF;
            border-radius: calc(20 * 100vw / 430);
            padding: calc(30 * 100vw / 430);
            margin-inline: auto;
            box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.30);

            @media (min-width: 768px) {
                width: calc(400 * 100vw / 1920);
                padding: calc(40 * 100vw / 1920);
                border-radius: calc(30 * 100vw / 1920);
            }
            @media (min-width: 1920px) {
                width: 400px;
                padding: 40px;
                border-radius: 30px;
            }

            h3 {
                width: 100%;

                img {
                    width: 100%;
                    height: auto;
                }
                span {
                    font-size: calc(16 * 100vw / 430);
                    margin-top: calc(4 * 100vw / 430);

                    @media (min-width: 768px) {
                        display: block;
                        font-size: calc(20 * 100vw / 1920);
                        margin-top: calc(4 * 100vw / 1920);;
                    }
                    @media (min-width: 1920px) {
                        font-size: 20px;
                        margin-top: 4px;
                    }
                }

                @media (min-width: 768px) {
                }
                @media (min-width: 1920px) {
                }
            }
            div {
                width: 100%;
                margin-top: calc(20 * 100vw / 430);
                border-radius: 12px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: auto;
                }

                @media (min-width: 768px) {
                     margin-top: calc(30 * 100vw / 1920);
                }
                @media (min-width: 1920px) {
                    margin-top: 30px;
                }
            }
            p {
                margin-top: calc(20 * 100vw / 430);
                font-size: calc(16 * 100vw / 430);
                line-height: 130%;

                @media (min-width: 768px) {
                    margin-top: calc(30 * 100vw / 1920);
                    font-size: calc(24 * 100vw / 1920);
                    line-height: 120%;
                }
                @media (min-width: 1920px) {
                    margin-top: 30px;
                    font-size: 24px;
                }
            }
        }
    }
}


/* ------------------------------------------------------ */
/* ----------------------- News ------------------------- */
/* ------------------------------------------------------ */
.l-news {
    background-color: #FFFFFF;
    padding-block: calc(56 * 100vw / 430);
    
    @media (min-width: 768px) {
        padding-block: calc(100 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        padding-block: 100px;
    }

    .l-news__inner {
        width: 90%;
        margin-inline: auto;

        @media (min-width: 768px) {
            width: calc(1280 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            width: 1280px;
        }
    }
}

.c-news-lists {
    list-style: none;
    padding-block: calc(24 * 100vw / 430);
    border-bottom: 1px solid #93E0FF;

    @media (min-width: 768px) {
        padding-block: calc(40 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        padding-block: 40px;
    }

    .c-news-list {
        font-size: calc(18 * 100vw / 430);
        line-height: 130%;
        padding-block: calc(8 * 100vw / 430);

        @media (min-width: 768px) {
            font-size: calc(24 * 100vw / 1920);
            padding-block: calc(16 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            font-size: 24px;
            padding-block: 16px;
        }
        
        a {
            color: #000000;
            text-decoration: none;

            @media (min-width: 768px) {
                display: flex;
            }
        }
        a:hover {
            text-decoration: underline;
        }
        .c-news-list__date {

            @media (min-width: 768px) {
                padding-right: calc(40 * 100vw / 1920);
                margin-right: calc(40 * 100vw / 1920);
                border-right: 1px solid #000000;
            }
            @media (min-width: 1920px) {
                padding-right: 40px;
                margin-right: 40px;
            }
        }
        .c-news-list__title {
            margin-top: calc(4 * 100vw / 430);
            font-size: calc(16 * 100vw / 430);
            line-height: 135%;

            @media (min-width: 768px) {
                font-size: calc(24 * 100vw / 1920);
                margin-top: 0;
            }
            @media (min-width: 1920px) {
                font-size: 24px;
            }
        }
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Character -------------------- */
/* ------------------------------------------------------ */
.l-character {
    background-image: url("../img/bg_character.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-block: calc(56 * 100vw / 430);

    @media (min-width: 768px) {
        padding-block: calc(113 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        padding-block: 113px;
    }

    .l-character__inner {
        position: relative;
        width: 100%;
        height: calc(440 * 100vw / 430);
        margin-top: calc(30 * 100vw / 430);
        margin-inline: auto;

        @media (min-width: 768px) {
            width: calc(1040 * 100vw / 1920);
            height: calc(880 * 100vw / 1920);
            margin-top: calc(30 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            width: 1040px;
            height: 880px;
            margin-top: 30px;
        }
    }
}
.c-character-01 {
    position: absolute;
    top: 0;
    left: calc(36 * 100vw / 430);
    width: calc(189 * 100vw / 430);
    height: calc(321 * 100vw / 430);

    img {
        width: 100%;
        height: auto;
    }

    @media (min-width: 768px) {
        left: calc(100 * 100vw / 1920);
        width: calc(440 * 100vw / 1920);
        height: calc(784 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        left: 100px;
        width: 440px;
        height: 784px;
    }
}
.c-character-01__detail {
    position: absolute;
    bottom: 0;
    left: calc(20 * 100vw / 430);
    width: calc(190 * 100vw / 430);
    height: calc(107 * 100vw / 430);
    font-size: calc(14 * 100vw / 430);
    line-height: 120%;
    background-image: url(../img/bg_character_detail.png);
    background-repeat: no-repeat;
    background-size: cover;

    @media (min-width: 768px) {
        left: 0;
        width: calc(439 * 100vw / 1920);
        height: calc(275 * 100vw / 1920);
        font-size: calc(24 * 100vw / 1920);
        background-image: url(../img/bg_character_detail_01.png);
    }
    @media (min-width: 1920px) {
        width: 439px;
        height: 275px;
        font-size: 24px;
    }

    h3 {
        position: absolute;
        bottom: calc(78 * 100vw / 430);
        left: calc(28 * 100vw / 430);
        text-align: center;
        color: #0800E1;

        @media (min-width: 768px) {
            bottom: calc(92 * 100vw / 1920);
            left: calc(90 * 100vw / 1920);
            width: calc(260 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            bottom: 92px;
            left: 90px;
            width: 260px;
        }
    }
    p {
        position: absolute;
        bottom: calc(18 * 100vw / 430);
        left: calc(40 * 100vw / 430);
        text-align: center;
        color: #FFFFFF;

        @media (min-width: 768px) {
            bottom: calc(30 * 100vw / 1920);
            left: calc(14 * 100vw / 1920);
            width: calc(400 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            bottom: 30px;
            left: 14px;
            width: 400px;
        }
    }
}
.c-character-02 {
    position: absolute;
    right: calc(36 * 100vw / 430);
    top: 0;
    width: calc(176 * 100vw / 430);
    height: calc(216 * 100vw / 430);

    img {
        width: 100%;
        height: auto;
    }

    @media (min-width: 768px) {
        right: calc(90 * 100vw / 1920);
        width: calc(409 * 100vw / 1920);
        height: calc(505 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        right: 90px;
        width: 409px;
        height: 505px;
    }
}
.c-character-02__detail {
    position: absolute;
    bottom: 0;
    right: calc(20 * 100vw / 430);
    width: calc(190 * 100vw / 430);
    height: calc(107 * 100vw / 430);
    font-size: calc(14 * 100vw / 430);
    line-height: 120%;
    background-image: url(../img/bg_character_detail.png);
    background-repeat: no-repeat;
    background-size: cover;

    @media (min-width: 768px) {
        bottom: calc(90 * 100vw / 1920);
        right: 0;
        width: calc(439 * 100vw / 1920);
        height: calc(281 * 100vw / 1920);
        font-size: calc(24 * 100vw / 1920);
        background-image: url(../img/bg_character_detail_02.png);
    }
    @media (min-width: 1920px) {
        bottom: 90px;
        width: 439px;
        height: 281px;
        font-size: 24px;
    }

    h3 {
        position: absolute;
        top: calc(4 * 100vw / 430);
        left: calc(45 * 100vw / 430);
        text-align: center;
        color: #0800E1;

        span {
            font-size: 80%;

            @media (min-width: 768px) {
                font-size: 100%;
            }
        }

        @media (min-width: 768px) {
            top: calc(126 * 100vw / 1920);
            left: calc(45 * 100vw / 1920);
            width: calc(350 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            top: 126px;
            left: 45px;
            width: 350px;
        }
    }
    p {
        position: absolute;
        bottom: calc(12 * 100vw / 430);
        left: calc(28 * 100vw / 430);
        color: #FFFFFF;
        text-align: center;

        @media (min-width: 768px) {
            bottom: calc(32 * 100vw / 1920);
            left: calc(40 * 100vw / 1920);
            width: calc(360 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            bottom: 32px;
            left: 40px;
            width: 360px;
        }
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Costume ---------------------- */
/* ------------------------------------------------------ */
.l-costume {
    background-image: url("../img/bg_costume.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-top: 1px solid #FFFFFF;
    padding-block: calc(56 * 100vw / 430);

    @media (min-width: 768px) {
        padding-block: calc(144 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        padding-block: 144px;
    }
}

.c-costume-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    width: calc(400 * 100vw / 430);;
    margin-top: 60px;
    margin-inline: auto;

    @media (min-width: 768px) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: calc(1020 * 100vw / 1920);
        margin-top: calc(60 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        width: 1020px;
        margin-top: 60px;
    }

    li {
        text-align: center;
        width: calc(200 * 100vw / 430);
        height: calc(200 * 100vw / 430);

        @media (min-width: 768px) {
            width: calc(360 * 100vw / 1920);
            height: calc(370 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            width: 360px;
            height: 370px;
        }

        @media (min-width: 768px) {
            &:nth-child(2),
            &:nth-child(5) {
                margin-inline: calc(-30 * 100vw / 1920);
            }
        }
        @media (min-width: 1920px) {
            &:nth-child(2),
            &:nth-child(5) {
                margin-inline: -30px;
            }
        }

        img {
            width: 100%;
            height: auto;
        }
    }
}
.c-costume-text {
    font-size: calc(18 * 100vw / 430);
    line-height: 120%;
    margin-top: 60px;
    text-align: center;
    color: #FFFFFF;

    @media (min-width: 768px) {
        font-size: calc(36 * 100vw / 1920);
        margin-top: calc(60 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        font-size: 36px;
        margin-top: 60px;
    }
}
.c-costume-text-end {
    font-size: calc(18 * 100vw / 430);
    line-height: 120%;
    margin-top: 60px;
    text-align: center;
    color: #FFFFFF;
    -webkit-text-stroke: 3px #4149BA;
    text-stroke: 3px #4149BA;
    paint-order: stroke;
    text-shadow: 0px 0px 10px #4149BA;

    @media (min-width: 768px) {
        font-size: calc(36 * 100vw / 1920);
        margin-top: calc(60 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        font-size: 36px;
        margin-top: 60px;
    }
}
.c-costume-image {
    width: 80%;
    border: 6px solid #93E0FF;
    border-radius: 20px;
    margin-inline: auto;
    margin-top: 60px;
    overflow: hidden;

    @media (min-width: 768px) {
        width: calc(884 * 100vw / 1920);
        border: 6px solid #93E0FF;
        border-radius: calc(20 * 100vw / 1920);
        margin-top: calc(60 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        width: 884px;
        border: 6px solid #93E0FF;
        border-radius: 20px;
        margin-top: 60px;
    }

    img {
        width: 100%;
        height: auto;
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Daily ----------------------- */
/* ------------------------------------------------------ */
.l-daily {
    .l-daily__content {
        background-image: linear-gradient(#FFFFFF, #D5E6E9);
        text-align: center;
        padding-top: calc(56 * 100vw / 430);
        padding-bottom: calc(56 * 100vw / 430);

        @media (min-width: 768px) {
            padding-top: calc(80 * 100vw / 1920);
            padding-bottom: calc(90 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            padding-top: 80px;
            padding-bottom: 90px;
        }
    }

    .c-daily-video {
        width: 80%;
        aspect-ratio: 16 / 9;
        margin-inline: auto;
        border: 6px solid #FFFFFF;
        border-radius: 20px;
        overflow: hidden;

        img {
            width: 100%;
            height: auto;
        }

        @media (min-width: 768px) {
            width: calc(880 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            width: 880px;
        }
    }
    .c-daily-text {
        text-align: center;
        font-size: calc(16 * 100vw / 430);
        margin-top: calc(32 * 100vw / 430);
        line-height: 130%;
        color: #000000;

        @media (min-width: 768px) {
            font-size: calc(36 * 100vw / 1920);
            margin-top: calc(80 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            font-size: 36px;
            margin-top: 80px;
        }
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Free ----------------------- */
/* ------------------------------------------------------ */
.l-free {
    .l-free__content {
        background-image: linear-gradient(#FFFFFF, #D5E6E9);
        text-align: center;
        padding-top: calc(56 * 100vw / 430);
        padding-bottom: calc(56 * 100vw / 430);

        @media (min-width: 768px) {
            padding-top: calc(80 * 100vw / 1920);
            padding-bottom: calc(90 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            padding-top: 80px;
            padding-bottom: 90px;
        }
    }

    .c-free-video {
        width: 80%;
        aspect-ratio: 16 / 9;
        margin-inline: auto;
        border: 6px solid #FFFFFF;
        border-radius: 20px;
        overflow: hidden;

        img {
            width: 100%;
            height: auto;
        }

        @media (min-width: 768px) {
            width: calc(880 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            width: 880px;
        }
    }
    .c-free-text {
        text-align: center;
        font-size: calc(16 * 100vw / 430);
        margin-top: calc(32 * 100vw / 430);
        line-height: 130%;
        color: #000000;

        @media (min-width: 768px) {
            font-size: calc(36 * 100vw / 1920);
            margin-top: calc(80 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            font-size: 36px;
            margin-top: 80px;
        }
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Support ---------------------- */
/* ------------------------------------------------------ */
.l-support {
    background-image: url("../img/bg_support.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-block: calc(56 * 100vw / 430);

    @media (min-width: 768px) {
        padding-block: calc(140 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        padding-block: 140px;
    }
}
.c-support-lists {
    list-style: none;
    width: 80%;
    margin-inline: auto;
    margin-top: calc(50 * 100vw / 430);

    @media (min-width: 768px) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: calc(80 * 100vw / 1920);
        width: calc(1200 * 100vw / 1920);
        margin-top: calc(90 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        grid-gap: 80px;
        width: 1200px;
        margin-top: 90px;
    }

    .c-support-list {
        background-color: #FFFFFF;
        border-radius: calc(24 * 100vw / 430);
        padding-block: calc(32 * 100vw / 430);
        padding-inline: calc(24 * 100vw / 430);
        margin-top: calc(24 * 100vw / 430);

        @media (min-width: 768px) {
            border-radius: calc(30 * 100vw / 1920);
            padding-block: calc(55 * 100vw / 1920);
            padding-inline: calc(40 * 100vw / 1920);
            margin-top: 0;
        }
        @media (min-width: 1920px) {
            border-radius: 30px;
            padding-block: 55px;
            padding-inline: 40px;
        }

        h3 {
            text-align: center;
            color: #8F57FF;
            font-size: calc(24 * 100vw / 430);
            line-height: 120%;

            @media (min-width: 768px) {
                font-size: calc(36 * 100vw / 1920);
            }
            @media (min-width: 1920px) {
                font-size: 36px;
            }
        }

        div {
            margin-top: 30px;
            border-radius: 12px;
            overflow: hidden;

            @media (min-width: 768px) {
                margin-top: calc(30 * 100vw / 1920);
                border-radius: calc(12 * 100vw / 1920);
            }
            @media (min-width: 1920px) {
                margin-top: 30px;
                border-radius: 12px;
            }

            img {
                width: 100%;
                height: auto;
            }
        }

        p {
            margin-top: 30px;
            font-size: calc(16 * 100vw / 430);
            line-height: 120%;
            text-align: center;

            @media (min-width: 768px) {
                margin-top: calc(30 * 100vw / 1920);
                font-size: calc(24 * 100vw / 1920);
            }
            @media (min-width: 1920px) {
                margin-top: 30px;
                font-size: 24px;
            }
        }
    }
}

.c-support-menu {
    margin-top: calc(50 * 100vw / 430);
    width: 80%;
    margin-inline: auto;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 4px solid #FFFFFF;
    border-radius: calc(24 * 100vw / 430);;

    @media (min-width: 768px) {
        margin-top: calc(90 * 100vw / 1920);
        width: calc(1200 * 100vw / 1920);
        border: 4px solid #FFFFFF;
        border-radius: calc(40 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        margin-top: 90px;
        width: 1200px;
        border: 4px solid #FFFFFF;
        border-radius: 40px;
    }

    .c-title {
        border-top: none;
        color: #FFFFFF;
        font-size: calc(24 * 100vw / 430);

        @media (min-width: 768px) {
            font-size: calc(48 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            font-size: 48px;
        }
    }

    .c-support-menu__lists {
        padding-inline: calc(24 * 100vw / 430);
        padding-block: calc(32 * 100vw / 430);

        @media (min-width: 768px) {
            padding-inline: calc(80 * 100vw / 1920);
            padding-block: calc(40 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            padding-inline: 80px;
            padding-block: 40px;
        }
    }

    .c-support-menu__list {
        padding-bottom: calc(32 * 100vw / 430);
        border-bottom: 1px solid #CEB6FF;
        margin-bottom: calc(32 * 100vw / 430);
        list-style: none;

        @media (min-width: 768px) {
            display: flex;
            align-items: center;
            padding-bottom: calc(40 * 100vw / 1920);
            margin-bottom: calc(40 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            padding-bottom: 40px;
            margin-bottom: 40px;
        }

        .c-support-menu__list__logo {
            width: calc(280 * 100vw / 430);
            height: calc(168 * 100vw / 430);
            margin-inline: auto;

            img {
                width: 100%;
                height: auto;
            }

            @media (min-width: 768px) {
                padding-right: calc(40 * 100vw / 1920);
                margin-right: calc(40 * 100vw / 1920);
                margin-left: 0;
                border-right: 1px solid #CEB6FF;
                width: calc(280 * 100vw / 1920);
                height: calc(168 * 100vw / 1920);
            }
            @media (min-width: 1920px) {
                padding-right: 40px;
                margin-right: 40px;
                width: 280px;
                height: 168px;
            }
        }

        h3 {
            font-size: calc(22 * 100vw / 430);
            line-height: 130%;
            text-align: center;

            @media (min-width: 768px) {
                font-size: calc(48 * 100vw / 1920);
                text-align: left;
            }
            @media (min-width: 1920px) {
                font-size: 48px;
            }
        }

        p {
            font-size: calc(16 * 100vw / 430);
            line-height: 130%;
            margin-top: calc(20 * 100vw / 430);

            @media (min-width: 768px) {
                font-size: calc(38 * 100vw / 1920);
                margin-top: calc(20 * 100vw / 1920);
            }
            @media (min-width: 1920px) {
                font-size: 38px;
                margin-top: 20px;
            }

            small {
                font-size: calc(16 * 100vw / 430);

                @media (min-width: 768px) {
                    font-size: calc(28 * 100vw / 1920);
                }
                @media (min-width: 1920px) {
                    font-size: 28px;
                }
            }
        }
    }
    .c-support-menu__list:last-child {
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Product ---------------------- */
/* ------------------------------------------------------ */
.l-product {
    background-image: url("../img/bg_product.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-block: calc(56 * 100vw / 430);

    @media (min-width: 768px) {
        padding-block: calc(100 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        padding-block: 100px;
    }

    .l-product__inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 90%;
        margin-inline: auto;

        @media (min-width: 768px) {
            width: calc(1000 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            width: 1000px;
        }
    }
    .l-product__bottom {
        width: 80%;
        margin-inline: auto;

        a {
            display: inline-block;
            color: #ffffff;
            text-decoration: none;
            font-size: calc(20 * 100vw / 430);
            width: 100%;
            margin-top: calc(32 * 100vw / 430);
            background-color: #1ABDFF;
            border: 3px solid #ffffff;
            border-radius: 9999px;
            text-align: center;
            padding-block: calc(12 * 100vw / 430);
            box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 10px 0px rgba(255, 255, 255, 0.3);
        }
    }
}
.c-product__package {
    width: calc(130 * 100vw / 430);
    height: calc(212 * 100vw / 430);

    @media (min-width: 768px) {
        width: calc(203 * 100vw / 1920);
        height: calc(327 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        width: 203px;
        height: 327px;
    }

    img {
        width: 100%;
        height: auto;
    }

}
.c-product__detail {
    width: calc(240 * 100vw / 430);

    @media (min-width: 768px) {
        width: calc(760 * 100vw / 1920);
        }
    @media (min-width: 1920px) {
        width: 760px;
    }

    h2 {
        font-size: calc(24 * 100vw / 430);
        line-height: 130%;

        @media (min-width: 768px) {
            font-size: calc(48 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            font-size: 48px;
        }
    }

    .c-product__detail__text {
        margin-top: calc(24 * 100vw / 430);
        width: 100%;

        @media (min-width: 768px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-row-gap: calc(20 * 100vw / 1920);
            grid-column-gap: calc(30 * 100vw / 1920);
            margin-top: calc(40 * 100vw / 1920);
            width: calc(700 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            grid-row-gap: 20px;
            grid-column-gap: 30px;
            margin-top: 40px;
            width: 700px;
        }
    }

    dl {
        display: flex;
        align-items: center;
        margin-top: calc(4 * 100vw / 430);

        @media (min-width: 768px) {
            margin-top: 0;
        }
        @media (min-width: 1920px) {
        }

        dt {
            width: calc(100 * 100vw / 430);
            padding-block: calc(4 * 100vw / 430);
            background-color: #6C7B82;
            text-align: center;
            color: #ffffff;
            font-size: calc(12 * 100vw / 430);

            @media (min-width: 768px) {
                width: calc(140 * 100vw / 1920);
                padding-block: calc(4 * 100vw / 1920);
                font-size: calc(18 * 100vw / 1920);
            }
            @media (min-width: 1920px) {
                width: 140px;
                padding-block: 4px;
                font-size: 18px;
            }
        }
        dd {
            padding-left: 18px;
            font-size: calc(13 * 100vw / 430);

            @media (min-width: 768px) {
                padding-left: calc(19 * 100vw / 1920);
                font-size: calc(19 * 100vw / 1920);
            }
            @media (min-width: 1920px) {
                padding-left: 19px;
                font-size: 19px;
            }
        }
    }
    .c-product__detail__link {

        a {
            display: inline-block;
            color: #ffffff;
            text-decoration: none;
            font-size: 24px;
            width: 100%;
            margin-top: 40px;
            background-color: #1ABDFF;
            border: 3px solid #ffffff;
            border-radius: 9999px;
            text-align: center;
            padding-block: 12px;
            box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 10px 0px rgba(255, 255, 255, 0.3);

            @media (min-width: 768px) {
                font-size: calc(24 * 100vw / 1920);
                width: calc(330 * 100vw / 1920);
                margin-top: calc(40 * 100vw / 1920);
                padding-block: calc(12 * 100vw / 1920);
                border: 3px solid #ffffff;
            }
            @media (min-width: 1920px) {
                font-size: 24px;
                width: 330px;
                margin-top: 40px;
                padding-block: 12px;
                border: 3px solid #ffffff;
            }
        }
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Footer ---------------------- */
/* ------------------------------------------------------ */
.l-footer {
    background-color: #ffffff;
    padding-block: calc(50 * 100vw / 430);

    @media (min-width: 768px) {
        padding-block: calc(50 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        padding-block: 50px;
    }

    .l-footer__inner {
        width: 90%;
        margin-inline: auto;

        @media (min-width: 768px) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: calc(1200 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            width: 1200px;
        }
    }
}
.c-footer__logo {
    width: calc(208 * 100vw / 430);
    height: calc(84 * 100vw / 430);
    margin-inline: auto;

    @media (min-width: 768px) {
        width: calc(208 * 100vw / 1920);
        height: calc(84 * 100vw / 1920);
        margin-inline: 0;
    }
    @media (min-width: 1920px) {
        width: 208px;
        height: 84px;
    }

    img {
        width: 100%;
        height: auto;
    }
}
.c-footer__contact {
    text-align: center;
    margin-top: calc(40 * 100vw / 430);

    @media (min-width: 768px) {
        text-align: left;
        margin-top: 0;
    }

    a {
        text-decoration: none;
        color: #000000;
        font-size: calc(18 * 100vw / 430);
        font-weight: bold;

        @media (min-width: 768px) {
            font-size: calc(18 * 100vw / 1920);
        }
        @media (min-width: 1920px) {
            font-size: 18px;
        }
    }
}
.c-footer__copyright {
    margin-top: calc(24 * 100vw / 430);
    font-size: calc(12 * 100vw / 430);
    text-align: center;

    @media (min-width: 768px) {
        margin-top: calc(24 * 100vw / 1920);
        font-size: calc(12 * 100vw / 1920);
        text-align: left;
    }
    @media (min-width: 1920px) {
        margin-top: 24px;
        font-size: 12px;
    }
}

/* -------------------------------------
	add imagineer 
----------------------------------------*/
.c-bonus-logo {
	background: #0D0A37;
	padding: 2% 0;
}
@media screen and (max-width: 768px) {
	.c-bonus-logo {
		padding: 3% 0 2%;
	}
}

.c-bonus-logo-image {
	width: 30%;
	margin: auto;

	@media (min-width: 768px) {
		width: calc(442 * 100vw / 1920);
	}
	@media (min-width: 1920px) {
		width: 442px;
	}

	img {
		width: 100%;
		height: auto;
	}
}

.c-title-bonus {
	border-top: unset;
}

.c-title-bonus img {
	width: 17%;
	max-width: 285px;

	@media screen and (max-width: 768px) {
		width: 20%;
	}
}

.l-bonus__content {
	background-image: url(../img/bonus/bg_costume.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

	padding-block: calc(56 * 100vw / 430);

	@media (min-width: 768px) {
		padding-block: calc(100 * 100vw / 1920);
	}
	@media (min-width: 1920px) {
		padding-block: 100px;
	}
}

.c-bonus-image {
	width: 80%;
	margin-inline: auto;
	overflow: hidden;

	@media (min-width: 768px) {
		width: calc(884 * 100vw / 1920);
	}
	@media (min-width: 1920px) {
		width: 884px;
	}

	img {
		width: 100%;
		height: auto;
	}
}