@charset "UTF-8";

* {
    margin: 0;
}

body {
    font-feature-settings: "palt";
}

.adlp-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.adlp-wrapper .adlp-relative {
    position: relative;
}

@media all and (min-width: 768px) {
    .adlp-outer {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
}

.adlp-wrapper .adlp-floating {
    width: min(calc((1920 / 1080) * 100vw), 1920px);
    position: fixed;
    bottom: 0;
    z-index: 10;
}

.adlp-wrapper .adlp-floating_inner {
    width: min(calc((600 / 1080) * 100vw), 600px);
    margin: 0 auto;
}

.adlp-wrapper .adlp-btn:hover {
    /* filter: brightness(130%); */
}

.adlp-wrapper .adlp-btn {
    transition: filter 0.3s;
}

.adlp-wrapper .adlp-btn.-anime01:hover,
.adlp-wrapper .adlp-btn.-anime02:hover,
.adlp-wrapper .adlp-btn.-anime03:hover {
    filter: none;
}

.adlp-wrapper .adlp-btn.-anime01,
.adlp-wrapper .adlp-btn.-anime02,
.adlp-wrapper .adlp-btn.-anime03 {
    transition: none;
}

.adlp-wrapper .adlp-btn.-anime01 a,
.adlp-wrapper .adlp-btn.-anime02 a,
.adlp-wrapper .adlp-btn.-anime03 a {
    transition: transform 0.3s;
    display: block;
}

.adlp-wrapper .adlp-btn.-anime01:hover a {
    transform: scale(1.1);
}

.adlp-wrapper .adlp-btn.-anime02:hover a {
    transform: translateY(-5px);
}

.adlp-wrapper .adlp-btn.-anime03:hover a {
    animation: adlpHoverShake 0.15s linear 3;
}

@keyframes adlpHoverShake {
    0% {
        transform: skew(0deg, 0deg);
    }

    25% {
        transform: skew(1deg, 1deg);
    }

    75% {
        transform: skew(-1deg, -1deg);
    }

    100% {
        transform: skew(0deg, 0deg);
    }
}

.adlp-wrapper .adlp-pc {
    display: block;
}

.adlp-wrapper .adlp-sp {
    display: none;
}

@media all and (min-width: 0px) and (max-width: 767.9px) {
    .adlp-outer {
        overflow: hidden;
    }

    .adlp-wrapper .adlp-floating {
        width: 100%;
    }

    .adlp-wrapper .adlp-floating_inner {
        width: calc((600 / 750) * 100vw);
    }

    .adlp-wrapper .adlp-pc {
        display: none;
    }

    .adlp-wrapper .adlp-sp {
        display: block;
    }
}

/* Section specific styles */

/* fv_btn_01 */

.fv_btn_01 {
    position: absolute;
    left: min(calc(491 / 1080 * 100vw), 491px);
    top: min(calc(578.5 / 1080 * 100vw), 578.5px);
    width: min(calc(458 / 1080 * 100vw), 458px);
}

@media screen and (max-width: 767px) {
    .fv_btn_01 {
        width: calc(704 / 750 * 100vw);
        left: calc(23.40625 / 750 * 100vw);
        top: calc(951 / 750 * 100vw);
    }
}

/* fv_btn_02 */

.fv_btn_02 {
    position: absolute;
    left: min(calc(971 / 1080 * 100vw), 971px);
    top: min(calc(578.5 / 1080 * 100vw), 578.5px);
    width: min(calc(458 / 1080 * 100vw), 458px);
}

@media screen and (max-width: 767px) {
    .fv_btn_02 {
        width: calc(704 / 750 * 100vw);
        left: calc(23.40625 / 750 * 100vw);
        top: calc(1097 / 750 * 100vw);
    }
}

.sec02_btn_wrap {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: min(calc(304 / 1080 * 100vw), 304px);
    width: min(calc(920 / 1080 * 100vw), 920px);
    display: flex;
    gap: min(calc(16 / 1080 * 100vw), 16px);
    flex-wrap: wrap;

    @media screen and (max-width: 767px) {
        top: calc(599 / 750 * 100vw);
        width: calc(716 / 750 * 100vw);
        gap: calc(16 / 750 * 100vw);
    }
}

.sec02_btn {
    width: min(calc(171 / 1080 * 100vw), 171px);

    @media screen and (max-width: 767px) {
        width: calc(228 / 750 * 100vw);
    }
}

/* sec04 */

.adlp-wrapper .video01 {
    position: absolute;
    width: min(calc((406 / 1080) * 100vw), 406px);
    top: min(calc((701 / 1080) * 100vw), 701px);
    left: min(calc((993 / 1080) * 100vw), 993px);
}

.adlp-wrapper .sec04 iframe {
    width: 100%;
    height: min(calc((228 / 1080) * 100vw), 228px);
}

@media screen and (max-width: 767px) {
    .adlp-wrapper .video01 {
        width: calc((630 / 750) * 100vw);
        top: calc((2440 / 750) * 100vw);
        left: 50%;
        transform: translateX(-50%);
    }

    .adlp-wrapper .sec04 iframe {
        height: calc((354 / 750) * 100vw);
    }
}

/* cv01_btn_01 */

.cv01_btn_01 {
    position: absolute;
    left: min(calc(491 / 1080 * 100vw), 491px);
    top: min(calc(101.5 / 1080 * 100vw), 101.5px);
    width: min(calc(458 / 1080 * 100vw), 458px);
}

@media screen and (max-width: 767px) {
    .cv01_btn_01 {
        width: calc(704 / 750 * 100vw);
        left: calc(23 / 750 * 100vw);
        top: calc(104 / 750 * 100vw);
    }
}

/* cv01_btn_02 */

.cv01_btn_02 {
    position: absolute;
    left: min(calc(971 / 1080 * 100vw), 971px);
    top: min(calc(101.5 / 1080 * 100vw), 101.5px);
    width: min(calc(458 / 1080 * 100vw), 458px);
}

@media screen and (max-width: 767px) {
    .cv01_btn_02 {
        width: calc(704 / 750 * 100vw);
        left: calc(23 / 750 * 100vw);
        top: calc(250 / 750 * 100vw);
    }
}


.footer {
    padding-bottom: min(calc(73 / 1080 * 100vw), 73px);
}

@media screen and (max-width: 767px) {
    .footer {
        padding-bottom: calc(110 / 750 * 100vw);
    }
}

/* footer_btn_01 */

.footer_btn_01 {
    position: absolute;
    left: min(calc(753 / 1080 * 100vw), 753px);
    top: min(calc(57 / 1080 * 100vw), 57px);
    width: min(calc(158 / 1080 * 100vw), 158px);
}

@media screen and (max-width: 767px) {
    .footer_btn_01 {
        width: calc(239 / 750 * 100vw);
        left: calc(255.40625 / 750 * 100vw);
        top: calc(70 / 750 * 100vw);
    }
}

/* footer_btn_02 */

.footer_btn_02 {
    position: absolute;
    left: min(calc(971 / 1080 * 100vw), 971px);
    top: min(calc(57 / 1080 * 100vw), 57px);
    width: min(calc(68 / 1080 * 100vw), 68px);
}

@media screen and (max-width: 767px) {
    .footer_btn_02 {
        width: calc(102 / 750 * 100vw);
        left: calc(323.90625 / 750 * 100vw);
        top: calc(148 / 750 * 100vw);
    }
}

/* footer_btn_03 */

.footer_btn_03 {
    position: absolute;
    left: min(calc(1099 / 1080 * 100vw), 1099px);
    top: min(calc(57 / 1080 * 100vw), 57px);
    width: min(calc(68 / 1080 * 100vw), 68px);
}

@media screen and (max-width: 767px) {
    .footer_btn_03 {
        width: calc(102 / 750 * 100vw);
        left: calc(323.90625 / 750 * 100vw);
        top: calc(226 / 750 * 100vw);
    }
}

/* floating */
.adlp-wrapper .adlp-floating {
    width: min(calc((1920 / 1080) * 100vw), 1920px);
    position: fixed;
    bottom: 0;
    z-index: 10;
    display: none;
    background-color: #121212;
    padding: min(calc((10 / 1080) * 100vw), 10px) 0;
}

.adlp-wrapper .adlp-floating .adlp-btn__wrapper {
    width: min(calc((710 / 1080) * 100vw), 710px);
    margin: 0 auto;
    display: flex;
    gap: min(calc((30 / 1080) * 100vw), 30px);
}

@media screen and (max-width: 767px) {
    .adlp-wrapper .adlp-floating {
        width: 100%;
        padding: calc((14 / 750) * 100vw) 0 calc((16 / 750) * 100vw);
    }

    .adlp-wrapper .adlp-floating .adlp-btn__wrapper {
        width: calc((702 / 750) * 100vw);
        gap: calc((22 / 750) * 100vw);
        margin: 0 auto;
        justify-content: center;
    }
}

.ambassadors__wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: min(calc(45 / 1080 * 100vw), 45px) 0;
    width: min(calc(898 / 1080 * 100vw), 898px);
    margin: auto;
    top: min(calc(250 / 1080 * 100vw), 250px);
    display: flex;
    flex-wrap: wrap;
    gap: min(calc(12 / 1080 * 100vw), 12px);
}

.ambassadors__btn {
    flex: 0 0 min(calc(170 / 1080 * 100vw), 170px);
    position: relative;
}

.ambassadors__btn.new::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("../img/common/ambassadors_btn_new.webp");
    background-size: 100% auto;
    background-position: 50% 0;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .ambassadors__wrapper {
        width: calc(716 / 750 * 100vw);
        top: calc(523 / 750 * 100vw);
        gap: calc(16 / 750 * 100vw);
        padding: calc(60 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
    }

    .ambassadors__btn {
        flex: 0 0 calc(228 / 750 * 100vw);
    }
}

.adlp-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 100;
}

.adlp-modal__base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.adlp-modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: min(47.962962963vw, 518px);
    min-height: min(18.5185185185vw, 200px);
    max-height: 90vh;
}

.adlp-modal.new .adlp-modal__content::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("../img/common/ambassadors_modal_new.webp");
    background-size: 100% auto;
    background-position: 50% 0;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
}

.adlp-modal__content.-large {
    width: min(97.037037037vw, 1048px);
    padding: 0;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
}

.adlp-modal__content.-large .adlp-modal__content__close {
    background-color: red;
    top: min(1.6666666667vw, 18px);
    right: min(2.7777777778vw, 30px);
}

@media screen and (max-width: 767px) {
    .adlp-modal__content {
        width: 85.3333333333vw;
        /*padding: 4vw;*/
    }

    .adlp-modal__content.-large {
        width: 85.3333333333vw;
        overflow-y: scroll;
        overscroll-behavior-y: contain;
    }
}

.adlp-modal__content__close {
    width: min(3.7037037037vw, 40px);
    aspect-ratio: 1/1;

    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='30' fill='%23A8A8A8'/%3E%3Crect x='17.3291' y='38.6924' width='29.6125' height='4.93542' rx='2.46771' transform='rotate(-45 17.3291 38.6924)' fill='white'/%3E%3Crect x='20.8188' y='18.4521' width='29.6125' height='4.93542' rx='2.46771' transform='rotate(45 20.8188 18.4521)' fill='white'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: min(calc(20 / 1080 * 100vw), 20px);
    right: min(calc(20 / 1080 * 100vw), 20px);
    cursor: pointer;
    z-index: 10;
}

@media screen and (max-width: 767px) {
    .adlp-modal__content__close {
        width: calc(60 / 750 * 100vw);
        top: calc(45 / 750 * 100vw);
        right: calc(15 / 750 * 100vw);
    }
}

.adlp-modal__content__close svg {
    width: 100%;
    height: 100%;
}

.adlp-modal__content__title {
    text-align: center;
    font-size: min(2.4074074074vw, 26px);
}

@media screen and (max-width: 767px) {
    .adlp-modal__content__title {
        font-size: 5.3333333333vw;
    }
}

.adlp-modal__content__body {
    margin: min(2.7777777778vw, 30px) auto 0;
    font-size: min(1.6666666667vw, 18px);
}

@media screen and (max-width: 767px) {
    .adlp-modal__content__body {
        margin: 4vw auto 0;
        font-size: 2.6666666667vw;
    }
}

.adlp-modal__content__img {
    margin: min(2.7777777778vw, 30px) auto 0;
    width: 80%;
}

@media screen and (max-width: 767px) {
    .adlp-modal__content__img {
        margin: 4vw auto 0;
    }
}

.modal-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 min(1.8518518519vw, 20px);
    pointer-events: none;
    width: min(57.4074074074vw, 620px);
}

@media (max-width: 767px) {
    .modal-nav {
        width: 100vw;
    }
}

.modal-prev,
.modal-next {
    width: min(3.7037037037vw, 40px);
    height: min(3.7037037037vw, 40px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: opacity 0.3s;
}

@media (max-width: 767px) {

    .modal-prev,
    .modal-next {
        width: 7.4666666667vw;
        height: 7.4666666667vw;
    }
}

.modal-prev:hover,
.modal-next:hover {
    opacity: 0.8;
}