@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;
    }
}
.c-title--pages {
    border-top: none;
    background-image: linear-gradient(90deg, #F09CFD, #5593FF);
    text-align: center;
    padding-block: 2vw;

    img {
        width: 110%;
        margin-left: -5%;

        @media (min-width: 768px) {
            width: calc(1020 * 100vw / 1920);
            margin-left: 0;
        }
        @media (min-width: 1920px) {
            width: 1020px;
             margin-left: 0;
        }
    }

    @media (min-width: 768px) {
        padding-block: 0;
    }
    @media (min-width: 1920px) {
        padding-block: 0;
    }
}


/* ------------------------------------------------------ */
/* ----------------------- 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-image: image-set(
      url("../img/bg_fab.webp") type("image/webp"),
      url("../img/bg_fab.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/bg_fab.webp") type("image/webp"),
      url("../img/bg_fab.png") type("image/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;
    }
}

.c-fab-button.en {
    font-size: 4.5vw;

    @media (min-width: 768px) {
        font-size: 23px;
    }
    @media (min-width: 1920px) {
        font-size: 23px;
    }
}
.c-fab-button.tc {
    font-size: 6vw;

    @media (min-width: 768px) {
        font-size: 30px;
    }
    @media (min-width: 1920px) {
        font-size: 30px;
    }
}
.c-fab-button.sc {
    font-size: 5vw;

    @media (min-width: 768px) {
        font-size: 27px;
    }
    @media (min-width: 1920px) {
        font-size: 27px;
    }
}
.c-fab-button.kr {
    font-size: 5vw;

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

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

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

/* ------------------------------------------------------ */
/* ----------------------- Button ----------------------- */
/* ------------------------------------------------------ */
.c-button {
    display: inline-block;
    text-decoration: none;
    width: 70%;
    font-size: 5vw;
    padding-block: 3vw;
    border-radius: 9999px;
    text-align: center;

    @media (min-width: 768px) {
        font-size: calc(36 * 100vw / 1920);
        width: calc(470 * 100vw / 1920);
        padding-block: calc(20 * 100vw / 1920);
    }
    @media (min-width: 1920px) {
        font-size: 36px;
        width: 470px;
        padding-block: 20px;
    }
}
.c-button--primary {
    color: #ffffff;
    background-color: #00A5E7;
    border: 3px solid #CFECF8;
    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-button--primary:hover {
    background-color: #8F57FF;
    border: 3px solid #CFECF8;
    box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 10px 0px rgba(255, 255, 255, 0.3);

}


/* ------------------------------------------------------ */
/* ----------------------- Header ----------------------- */
/* ------------------------------------------------------ */
.l-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 16vw;
    padding-inline: 4vw;
    background-color: #8F57FF;

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

    .c-header-logo {
        width: 16vw;

        @media (min-width: 768px) {
            width: 110px;
        }
        @media (min-width: 1920px) {
            width: 110px;
        }

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


/* ------------------------------------------------------ */
/* ----------------------- Lower Pages ------------------ */
/* ------------------------------------------------------ */
.l-main {
    background-image: url(../img/bg_pages.png);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;

    .l-main__inner {
        width: 100%;
        margin-inline: auto;
        padding-block: 8vw;

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

.c-main-title {
    width: 90%;
    margin-inline: auto;
    background-image: linear-gradient(90deg, #0099ffbd, #F30DFFbd);
    border: 1px solid #12B8FF;
    border-radius: 9999px;
    text-align: center;
    color: #FFFFFF;
    font-size: 3.4vw;
    padding-block: 3.6vw;
    text-shadow: 0px 0px 6px #15557B;

    @media (min-width: 768px) {
        width: 100%;
        font-size: calc(52 * 100vw / 1920);
        padding-block: calc(24 * 100vw / 1920);
        text-shadow: 0px 0px 10px #15557B;
        border: 2px solid #12B8FF;
    }
    @media (min-width: 1920px) {
        font-size: 52px;
        padding-block: 24px;
        text-shadow: 0px 0px 10px #15557B;
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Lower Pages Card ------------- */
/* ------------------------------------------------------ */
.c-main-card {
    width: 90%;
    margin-inline: auto;
    background-image: linear-gradient(#FFFFFF, #D5E6E9);
    border-radius: 6vw;
    overflow: hidden;
    margin-top: 8vw;

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

    .c-main-card__head {

        .c-menu-logo {
            text-align: center;
            width: 64vw;
            margin-inline: auto;
            padding-top: 7vw;

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

            p {
                font-size: 4vw;

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

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

    }
    .c-main-card__body {
        padding: 7vw;

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

        img {
            width: 100%;
            height: auto;
        }
        p {
            font-size: 4vw;
            margin-top: 5vw;

            @media (min-width: 768px) {
                font-size: calc(24 * 100vw / 1920);
                margin-top: calc(50 * 100vw / 1920);
            }
            @media (min-width: 1920px) {
                font-size: 24px;
                margin-top: 50px;
            }
        }
    }
}
.c-main-card:nth-of-type(1) {
    margin-top: 4vw;

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

.c-main-link {
    text-align: center;
    margin-top: calc(32 * 100vw / 430);

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


/* ------------------------------------------------------ */
/* ----------------------- KV --------------------------- */
/* ------------------------------------------------------ */
.l-kv {
    position: relative;
    width: 100%;
    aspect-ratio: 430 / 1020;
    background-color: #3D2D8F;
    /* image-set()に対応していない古いブラウザ向けの最終フォールバック。*/
    /* 
    background-image: url("../img/bg_kv_sp.png"); */
    /* background-image: url("../img/bg_kv.png"); */
    /* background-image: image-set( */
      /* url("../img/bg_kv_sp.webp") type("image/webp"), */ /* WebP対応ブラウザ向け */
      /* url("../img/bg_kv_sp.png") type("image/png")    /* WebP非対応ブラウザ向け (PNGフォールバック) */
    /* ); */
    /* SafariなどのWebkitブラウザ向けにベンダープレフィックス*/
    /* background-image: -webkit-image-set(
      url("../img/bg_kv_sp.webp") type("image/webp"),
      url("../img/bg_kv_sp.png") type("image/png")
    ); */
    background-repeat: no-repeat;
    background-size: cover;

    @media (min-width: 768px) {
        aspect-ratio: 1920 / 1080;
        background-color: #3D2D8F;
        /* 
        background-image: url("../img/bg_kv.png");
        background-image: image-set(
          url("../img/bg_kv.webp") type("image/webp"),
          url("../img/bg_kv.png") type("image/png")
        );
        background-image: -webkit-image-set(
          url("../img/bg_kv.webp") type("image/webp"),
          url("../img/bg_kv.png") type("image/png")
        );
        */
    }
    @media (min-width: 1920px) {
    }
}

.l-kv.en {
    background-image: url("../img/lang/en/EN_bg_kv_sp.png");
    background-image: url("../img/lang/en/EN_bg_kv.png");
    background-image: image-set(
      url("../img/lang/en/EN_bg_kv_sp.webp") type("image/webp"),
      url("../img/lang/en/EN_bg_kv_sp.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/lang/en/EN_bg_kv_sp.webp") type("image/webp"),
      url("../img/lang/en/EN_bg_kv_sp.png") type("image/png")
    );

    @media (min-width: 768px) {
        background-image: url("../img/lang/en/EN_bg_kv.png");
        background-image: image-set(
          url("../img/lang/en/EN_bg_kv.webp") type("image/webp"),
          url("../img/lang/en/EN_bg_kv.png") type("image/png")
        );
        background-image: -webkit-image-set(
          url("../img/lang/en/EN_bg_kv.webp") type("image/webp"),
          url("../img/lang/en/EN_bg_kv.png") type("image/png")
        );
    }
}
.l-kv.tc {
    background-image: url("../img/lang/tc/TC_bg_kv_sp.png");
    background-image: url("../img/lang/tc/TC_bg_kv.png");
    background-image: image-set(
      url("../img/lang/tc/TC_bg_kv_sp.webp") type("image/webp"),
      url("../img/lang/tc/TC_bg_kv_sp.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/lang/tc/TC_bg_kv_sp.webp") type("image/webp"),
      url("../img/lang/tc/TC_bg_kv_sp.png") type("image/png")
    );

    @media (min-width: 768px) {
        background-image: url("../img/lang/tc/TC_bg_kv.png");
        background-image: image-set(
          url("../img/lang/tc/TC_bg_kv.webp") type("image/webp"),
          url("../img/lang/tc/TC_bg_kv.png") type("image/png")
        );
        background-image: -webkit-image-set(
          url("../img/lang/tc/TC_bg_kv.webp") type("image/webp"),
          url("../img/lang/tc/TC_bg_kv.png") type("image/png")
        );
    }
}
.l-kv.sc {
    background-image: url("../img/lang/sc/SC_bg_kv_sp.png");
    background-image: url("../img/lang/sc/SC_bg_kv.png");
    background-image: image-set(
      url("../img/lang/sc/SC_bg_kv_sp.webp") type("image/webp"),
      url("../img/lang/sc/SC_bg_kv_sp.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/lang/sc/SC_bg_kv_sp.webp") type("image/webp"),
      url("../img/lang/sc/SC_bg_kv_sp.png") type("image/png")
    );

    @media (min-width: 768px) {
        background-image: url("../img/lang/sc/SC_bg_kv.png");
        background-image: image-set(
          url("../img/lang/sc/SC_bg_kv.webp") type("image/webp"),
          url("../img/lang/sc/SC_bg_kv.png") type("image/png")
        );
        background-image: -webkit-image-set(
          url("../img/lang/sc/SC_bg_kv.webp") type("image/webp"),
          url("../img/lang/sc/SC_bg_kv.png") type("image/png")
        );
    }
}
.l-kv.kr {
    background-image: url("../img/lang/kr/KR_bg_kv_sp.png");
    background-image: url("../img/lang/kr/KR_bg_kv.png");
    background-image: image-set(
      url("../img/lang/kr/KR_bg_kv_sp.webp") type("image/webp"),
      url("../img/lang/kr/KR_bg_kv_sp.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/lang/kr/KR_bg_kv_sp.webp") type("image/webp"),
      url("../img/lang/kr/KR_bg_kv_sp.png") type("image/png")
    );

    @media (min-width: 768px) {
        background-image: url("../img/lang/kr/KR_bg_kv.png");
        background-image: image-set(
          url("../img/lang/kr/KR_bg_kv.webp") type("image/webp"),
          url("../img/lang/kr/KR_bg_kv.png") type("image/png")
        );
        background-image: -webkit-image-set(
          url("../img/lang/kr/KR_bg_kv.webp") type("image/webp"),
          url("../img/lang/kr/KR_bg_kv.png") type("image/png")
        );
    }
}

.c-kv-switch {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(62 * 100vw / 430);
    height: calc(62 * 100vw / 430);
    z-index: 2;

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

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

    @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);
            text-stroke: 4px #100D49;
            paint-order: stroke;
        }
    }

    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;
        }
    }
}


/* ----------------------- KV Slider -------------------- */
.swiper {
    width: 100%;
    aspect-ratio: 840 / 1400;

    @media (min-width: 768px) {
        aspect-ratio: 1920 / 1080;
    }
}
.swiper-slide {
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ------------------------------------------------------ */
/* ----------------------- About ------------------------ */
/* ------------------------------------------------------ */
.l-about {
    .l-about__content {
        background-image: url("../img/bg_about.png");
        background-image: image-set(
          url("../img/bg_about.webp") type("image/webp"),
          url("../img/bg_about.png") type("image/png")
        );
        background-image: -webkit-image-set(
          url("../img/bg_about.webp") type("image/webp"),
          url("../img/bg_about.png") type("image/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;
        }
    }
    .c-about-link {
        text-align: center;
        margin-top: calc(32 * 100vw / 430);

        @media (min-width: 768px) {
            margin-top: calc(64 * 100vw / 1920);
        }
        @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;
                }
            }
        }
    }
    .c-menu-link {
        text-align: center;
        margin-top: calc(32 * 100vw / 430);

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


/* ------------------------------------------------------ */
/* ----------------------- 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-image: image-set(
      url("../img/bg_character.webp") type("image/webp"),
      url("../img/bg_character.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/bg_character.webp") type("image/webp"),
      url("../img/bg_character.png") type("image/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-image: image-set(
      url("../img/bg_character_detail.webp") type("image/webp"),
      url("../img/bg_character_detail.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/bg_character_detail.webp") type("image/webp"),
      url("../img/bg_character_detail.png") type("image/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);
        background-image: image-set(
          url("../img/bg_character_detail_01.webp") type("image/webp"),
          url("../img/bg_character_detail_01.png") type("image/png")
        );
        background-image: -webkit-image-set(
          url("../img/bg_character_detail_01.webp") type("image/webp"),
          url("../img/bg_character_detail_01.png") type("image/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;
        }
*/
        position: absolute;
        text-align: center;
        color: #0800E1;

        top: 17%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 76%;

        @media (min-width: 768px) {
            top: 61%;
            width: 60%;
	}
    }
    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;
        }
*/
        position: absolute;
        text-align: center;
        color: #FFFFFF;

        width: 90%;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);

        @media (min-width: 768px) {
	        top: 84%;
	}
    }
}
.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-image: image-set(
      url("../img/bg_character_detail.webp") type("image/webp"),
      url("../img/bg_character_detail.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/bg_character_detail.webp") type("image/webp"),
      url("../img/bg_character_detail.png") type("image/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);
        background-image: image-set(
          url("../img/bg_character_detail_02.webp") type("image/webp"),
          url("../img/bg_character_detail_02.png") type("image/png")
        );
        background-image: -webkit-image-set(
          url("../img/bg_character_detail_02.webp") type("image/webp"),
          url("../img/bg_character_detail_02.png") type("image/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;
        }
*/
        position: absolute;
        color: #FFFFFF;
        text-align: center;

        width: 90%;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);

        @media (min-width: 768px) {
	        top: 75%;
	}
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Costume ---------------------- */
/* ------------------------------------------------------ */
.l-costume {
    background-image: url("../img/bg_costume.png");
    background-image: image-set(
      url("../img/bg_costume.webp") type("image/webp"),
      url("../img/bg_costume.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/bg_costume.webp") type("image/webp"),
      url("../img/bg_costume.png") type("image/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-image: image-set(
      url("../img/bg_support.webp") type("image/webp"),
      url("../img/bg_support.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/bg_support.webp") type("image/webp"),
      url("../img/bg_support.png") type("image/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-image: image-set(
      url("../img/bg_product.webp") type("image/webp"),
      url("../img/bg_product.png") type("image/png")
    );
    background-image: -webkit-image-set(
      url("../img/bg_product.webp") type("image/webp"),
      url("../img/bg_product.png") type("image/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;

        ul {
            list-style: none;

            li {
                margin-top: calc(24 * 100vw / 430);
            }
        }

        a {
            display: inline-block;
            color: #ffffff;
            text-decoration: none;
            font-size: calc(20 * 100vw / 430);
            width: 100%;
            background-color: #00A5E7;
            border: 3px solid #CFECF8;
            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);
        }
        a.button-download {
            background-color: #8F57FF;
            border: 3px solid #CFECF8;
            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 {
            padding-block: calc(4 * 100vw / 430);
            font-size: calc(12 * 100vw / 430);

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

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

        ul {
            display: flex;
            list-style: none;

            @media (min-width: 768px) {
                gap: calc(16 * 100vw / 1920);
                margin-top: calc(40 * 100vw / 1920);
            }
            @media (min-width: 1920px) {
                gap: 16px;
                margin-top: 40px;
            }
        }

        a {
            font-size: 24px;
            width: 100%;
            padding-block: 12px;

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


/* ------------------------------------------------------ */
/* ----------------------- 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;
    }
}


/* ------------------------------------------------------ */
/* ----------------------- Movie Slider ----------------- */
/* ------------------------------------------------------ */
.c-video__main__item {
    display: none;
}
#main1 {
    display: block; /* 初期表示 */
}
.thumbnail {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    cursor: pointer;
    margin-right: 10px;
    border: 1px solid #ccc;
}
/* 動画コンテナのスタイル */
.video-container {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9; /* 16:9 の比率を維持 */
}
.c-video__thumbnais {
    margin-top: 16px;

    .c-video__thumbnais__list {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        gap: 16px;

        li {
            flex: 0 1 calc(50% - 16px);
            box-sizing: border-box;

            @media (min-width: 768px) {
                max-width: calc(25% - 16px);
                flex: 1 1 calc(25% - 16px);
            }

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

    p.movie-txt {
        color: #fff;
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 1.6;
        margin-top: 0.5rem;
        text-align: center;
    }

    .movie-thumb {
        position: relative;
        background: #93E0FF;
        aspect-ratio: 1 / 0.5625;
        border-radius: 0.2rem;
        padding: 0.7rem;
        cursor: pointer;
        z-index: 0;
    }

    .movie-thumb::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #000;
        width: calc(100% - 0.4rem);
        height: calc(100% - 0.4rem);
        z-index: -1;
    }
}
.c-video__title {
    h3 {
        font-size: calc(36 * 100vw / 430);
        line-height: 130%;
        color: #FFFFFF;
        text-align: center;
        margin-bottom:2%;

        @media (min-width: 768px) {
            font-size: calc(68 * 100vw / 1920);
        }
    }
}
.c-video__main {
    position: relative;
    background: #93E0FF;
    border-radius: 0.3rem;
    padding: 1.2rem;
    /* margin: 5rem 0 7rem; */
    z-index: 0;
}
.c-video__main::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
    width: calc(100% - 0.7rem);
    height: calc(100% - 0.7rem);
    z-index: -1;
}


/* -------------------------------------
	add imagineer
----------------------------------------*/
.modaal-container {
    background: none !important;
}
.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-image: image-set(
          url("../img/bonus/bg_costume.webp") type("image/webp"),
          url("../img/bonus/bg_costume.png") type("image/png")
        );
        background-image: -webkit-image-set(
          url("../img/bonus/bg_costume.webp") type("image/webp"),
          url("../img/bonus/bg_costume.png") type("image/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;
	}
}

/** menu **/

.header-menu {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
#	position: relative;
	padding: 10px 15px;

	position: absolute;
	top: 0;
	right: 0;
	color: #fff;

    z-index: 2;
}
@media screen and (max-width: 750px) {
  .header-menu {
    padding: 1rem;
  }
}
.header-btn {
	position: relative;
#	font-size: 15.7px;
	font-weight: 700;
	cursor: pointer;

	font-size: 1.5vw;
    -webkit-text-stroke: 4px #100D49;
    text-stroke: 4px #100D49;
    paint-order: stroke;
}
@media screen and (max-width: 750px) {
	.header-btn {
#		font-size: 2rem;
		font-size: 4.5vw;
        -webkit-text-stroke: 3px #100D49;
        text-stroke: 3px #100D49;
	}
}
.header-btn::before {
	content: "";
	position: absolute;
#	top: 0;
#	left: -30px;
#	width: 20px;
#	height: 20px;
	background-image: url("../img/header_icon_lang.svg");
	background-repeat: no-repeat;

	background-size: auto 80%;
	background-position: center left;
	width: 2vw;
	height: 100%;
	top: 50%;
	left: -2.2vw;
	transform: translateY(-50%);
}
@media screen and (max-width: 750px) {
	.header-btn::before {
#		left: -3.5rem;
#		width: 2.7rem;
#		height: 2.7rem;
        background-size: auto 90%;
		width: 6vw;
		left: -6.5vw;
	}
}
.header-list {
	position: absolute;
#	top: 40px;
#	right: 15px;
	display: none;
	background-image: url("../img/header_menu_bg.jpg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
#	background-size: 100%;
	text-align: center;
	padding: 8px 15px 15px;

	top: 100%;
	right: 17%;
	background-size: cover;
}
@media screen and (max-width: 750px) {
	.header-list {
#		top: 5rem;
#		right: 1.5rem;
		background-size: cover;
		padding: 1.6rem 1.4rem 2rem;

		top: 90%;
	}
}
.header-item {
#	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;

	font-size: 1.3vw;
}
@media screen and (max-width: 750px) {
	.header-item {
#		font-size: 2.16rem;
		font-size: 4vw;
	}
}
.header-item:not(:last-child) {
#	margin-bottom: 11px;
	margin-bottom: 10%;
}
@media screen and (max-width: 750px) {
	.header-item:not(:last-child) {
#		margin-bottom: 2rem;
		margin-bottom: 15%;
	}
}

.header-item a {
	color: #fff;
	text-decoration: none;
}


/* ------------------------------------------------------ */
/* ----------------------- Modal Costume ---------------- */
/* ------------------------------------------------------ */
.video-costume-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 15px;
}
.video-costume-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-costume-title {
    text-align: center;
    margin: 2vw 0 3vw 0;
    color: #FFFFFF;
    font-size: 6vw;

    @media (min-width: 768px) {
        font-size: 32px;
        margin: 10px 0 20px 0;
    }
}

.c-modal-costume-lists {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    list-style: none;
    width: 100%;
    margin-top: 6vw;
    margin-inline: auto;

    @media (min-width: 768px) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        width: 100%;
        margin-top: 16px;
    }

    li {
        text-align: center;
        width: 100%;
        cursor: pointer;

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