* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    min-height: 100%;
    /*overflow-x: hidden;*/
    background: #120b08;
}

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

body.is-scroll-locked {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    display: block;
}

button {
    border: 0;
    background: none;
    padding: 0;
}

.mobile-nav {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1000;
    width: min(100vw, 640px);
    height: 42px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.84);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
}

.nav-logo {
    height: 100%;
}

.nav-logo img {
    width: auto;
    height: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-actions a,
.icon-button {
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.nav-actions .nav-login {
    width: auto;
    min-width: 42px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(231, 217, 201, 0.72);
    border-radius: 3px;
    color: #e7d9c9;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.nav-actions img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-page {
    width: min(100vw, 640px);
    margin: 0 auto;
    background: #f2e5ce;
}

.mobile-section {
    position: relative;
    width: 100%;
    aspect-ratio: 390 / 844;
    overflow: hidden;
    margin-top: -1px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

.hero-section {
    margin-top: 0;
    background-image: url("/static/images/promotion/20260713/1/background_0_m.jpg");
}

.cbt-section {
    background-image: url("/static/images/promotion/20260713/1/background_1_m.jpg");
}

.intro-report-section {
    background-image: url("/static/images/promotion/20260713/1/background_2_3_m.jpg");
}

.level-red-section {
    background-image: url("/static/images/promotion/20260713/1/background_4_5_m.jpg");
}

.store-share-section {
    background-image: url("/static/images/promotion/20260713/1/background_6_7_m.jpg");
}

.mobile-footer {
    width: 100%;
    margin-top: -1px;
    background: #090909;
}

.mobile-footer img {
    width: 100%;
    height: auto;
}

.pc-remote {
    display: none;
}

.hero-content {
    position: absolute;
    right: 4%;
    bottom: clamp(16px, 4.5vw, 28px);
    left: 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(7px, 1.8vw, 12px);
}

.hero-bi {
    width: min(78%, 500px);
}

.hero-catch {
    width: 100%;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 3vw, 18px);
    width: 92%;
}

.hero-buttons a {
    width: min(43%, 260px);
}

.hero-arrow {
    width: clamp(24px, 7vw, 38px);
    margin-top: 1px;
}

.cbt-card {
    position: absolute;
    top: 12%;
    left: 50%;
    width: 92%;
    transform: translateX(-50%);
}

.cbt-box {
    width: 100%;
}

.cbt-form {
    position: absolute;
    top: 13.5%;
    left: 50%;
    width: 78%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2.8vw, 18px);
}

.region-tabs {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 1.8vw, 12px);
    width: 76%;
}

.region-tab {
    width: calc((100% - clamp(6px, 1.8vw, 12px)) / 2);
    cursor: pointer;
}

.region-tab img {
    width: 100%;
}

.phone-field {
    display: flex;
    align-items: center;
    width: 100%;
    height: clamp(34px, 9.4vw, 52px);
    background: #efe5d8;
    border: 1px solid rgba(119, 70, 43, 0.35);
    border-radius: clamp(7px, 2vw, 12px);
    overflow: hidden;
    box-shadow: inset 0 -2px 0 rgba(81, 43, 25, 0.16);
}

.phone-prefix {
    flex: 0 0 31%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 0;
    outline: 0;
    color: #7b321d;
    font-size: clamp(13px, 3.5vw, 18px);
    font-weight: 700;
    text-align: center;
    text-align-last: center;
    white-space: nowrap;
    background: transparent;
    cursor: pointer;
}

.phone-prefix:disabled {
    opacity: 1;
    cursor: default;
}

.phone-field input {
    min-width: 0;
    flex: 1;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0 clamp(8px, 2.4vw, 12px);
    color: #5c2b1d;
    font-size: clamp(13px, 3.5vw, 18px);
    font-weight: 700;
    background: transparent;
}

.phone-field input::placeholder {
    color: #e7d9c9;
    opacity: 1;
}

.cbt-submit {
    width: 58%;
    cursor: pointer;
}

.cbt-submit img {
    width: 100%;
}

.cbt-checks {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.8vw, 10px);
    width: 92%;
    margin-top: clamp(2px, 0.8vw, 5px);
}

.cbt-check {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 2.2vw, 12px);
    cursor: pointer;
}

.cbt-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cbt-check span {
    flex: 0 0 auto;
    width: clamp(14px, 4.2vw, 22px);
    height: clamp(14px, 4.2vw, 22px);
    border-radius: 3px;
    background: #f7efe5;
    box-shadow: inset 0 -1px 0 rgba(83, 40, 24, 0.25);
}

.cbt-check input:checked + span {
    position: relative;
    background: #f7efe5;
}

.cbt-check input:checked + span::after {
    content: "";
    position: absolute;
    left: 27%;
    top: 9%;
    width: 38%;
    height: 62%;
    border-right: 3px solid #7d2f1e;
    border-bottom: 3px solid #7d2f1e;
    transform: rotate(45deg);
}

.cbt-check b {
    color: #e7d9c9;
    font-size: clamp(10px, 2.6vw, 14px);
    line-height: 1.25;
    font-weight: 700;
    text-align: left;
}

.intro-slider {
    position: absolute;
    top: 28%;
    left: 50%;
    width: calc(100% - 18px);
    transform: translate(-50%, -50%);
}

.slides {
    position: relative;
    width: 100%;
    aspect-ratio: 999 / 679;
    list-style: none;
}

.slides li {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.slides li.active {
    opacity: 1;
    pointer-events: auto;
}

.slides img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slide-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(10px, 2.6vw, 16px);
    list-style: none;
}

.slide-dots button {
    width: 10px;
    height: 10px;
    border: 1px solid #a18d76;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
}

.slide-dots li.active button {
    background: #958069;
}

.slide-arrow {
    display: none;
    position: absolute;
    top: 50%;
    width: clamp(42px, 4.4vw, 84px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 2;
}

.slide-arrow-prev {
    left: clamp(88px, 7.5vw, 140px);
}

.slide-arrow-next {
    right: clamp(88px, 7.5vw, 140px);
}

.slide-arrow img {
    width: 100%;
    height: auto;
}

.event-box {
    position: absolute;
    left: 50%;
    width: 93%;
    transform: translate(-50%, -50%);
}

.report-box {
    top: 78%;
}

.report-image {
    width: 100%;
}

.report-button-hit {
    display: none;
    pointer-events: none;
    visibility: hidden;
}

.report-mobile-button {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 15.4%;
    width: 38.2%;
    transform: translateX(-50%);
}

.report-mobile-button img {
    width: 100%;
}

.level-box {
    top: 29%;
}

.red-cliff-box {
    top: 78%;
}

.red-cliff-image {
    width: 100%;
}

.red-cliff-video-frame {
    display: none;
}

.red-cliff-youtube-button {
    position: absolute;
    top: 26.5%;
    left: 25.5%;
    z-index: 2;
    width: 13.5%;
    transform: translate(-50%, -50%);
}

.red-cliff-youtube-button img {
    width: 100%;
}

.store-box {
    top: 29%;
}

.facebook-box {
    position: absolute;
    top: 76%;
    left: 50%;
    width: 86%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 2.2vw, 14px);
}

.facebook-title {
    width: 86%;
    opacity: 0;
}

.facebook-content {
    width: 100%;
}

.facebook-button {
    width: 48%;
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    width: min(320px, 100%);
    padding: 26px 22px;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.modal-content p {
    margin-bottom: 20px;
    color: #3b2b1d;
    font-size: 15px;
    line-height: 1.5;
}

.modal-confirm-btn {
    min-width: 96px;
    height: 40px;
    border-radius: 4px;
    background: #8f2d1d;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.cbt-pop-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2150;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.58);
}

.cbt-pop-modal.is-open {
    display: flex;
}

.cbt-pop-content {
    position: relative;
    width: min(92vw, 769px);
}

.cbt-pop-box {
    width: 100%;
    display: block;
}

.cbt-pop-btn {
    position: absolute;
    right: 6.3%;
    bottom: 32.6%;
    width: min(44vw, 340px);
    cursor: pointer;
}

.cbt-pop-btn:disabled {
    cursor: default;
    opacity: 0.72;
}

.cbt-pop-btn img {
    width: 100%;
    display: block;
}

.youtube-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2200;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.72);
}

.youtube-modal.is-open {
    display: flex;
}

.youtube-modal-content {
    position: relative;
    width: min(92vw, 720px);
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.youtube-modal-content iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.youtube-modal-close {
    position: absolute;
    top: -42px;
    right: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.74);
    color: #fff;
    font-size: 28px;
    line-height: 30px;
    cursor: pointer;
}

#footer_nav {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    width: 100%;
    margin-top: calc(-1 * (min(100vw, 640px) * 100 / 390));
    padding: 18px 16px;
    list-style: none;
    background: #090909;
    transform: none !important;
    z-index: 2;
}

#footer_nav a {
    color: #cfc7bd;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
}

#footer_nav .highlight a {
    color: #ffffff;
}

@media (min-width: 641px) {
    :root {
        --pc-section-height: clamp(760px, 56.25vw, 1080px);
    }

    body {
        background:
            linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.36)),
            #1a100b;
    }

    .mobile-nav {
        width: 100%;
        max-width: 1920px;
        height: 60px;
        padding: 10px 30px;
    }

    .nav-actions {
        gap: 12px;
    }

    .nav-actions a,
    .icon-button {
        width: 34px;
        height: 34px;
    }

    .nav-actions .nav-login {
        width: auto;
        min-width: 56px;
        height: 32px;
        padding: 0 14px;
        font-size: 15px;
        line-height: 30px;
    }

    .mobile-page {
        width: 100%;
        max-width: 1920px;
        background: #f1e5ce;
    }

    .mobile-section {
        aspect-ratio: auto;
        height: var(--pc-section-height);
        margin-top: 0;
        background-position: center center;
        background-size: cover;
    }

    .hero-section {
        background-image: url("/static/images/promotion/20260713/1/background_0.jpg");
    }

    .cbt-section {
        background-image: url("/static/images/promotion/20260713/1/background_1.jpg");
    }

    .intro-report-section,
    .level-red-section,
    .store-share-section {
        height: calc(var(--pc-section-height) * 2);
        background-image: none;
    }

    .intro-report-section::before,
    .intro-report-section::after,
    .level-red-section::before,
    .level-red-section::after,
    .store-share-section::before,
    .store-share-section::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: var(--pc-section-height);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .intro-report-section::before,
    .level-red-section::before,
    .store-share-section::before {
        top: 0;
    }

    .intro-report-section::after,
    .level-red-section::after,
    .store-share-section::after {
        top: var(--pc-section-height);
    }

    .intro-report-section::before {
        background-image: url("/static/images/promotion/20260713/1/background_2.jpg");
    }

    .intro-report-section::after {
        background-image: url("/static/images/promotion/20260713/1/background_3.jpg");
    }

    .level-red-section::before {
        background-image: url("/static/images/promotion/20260713/1/background_4.jpg");
    }

    .level-red-section::after {
        background-image: url("/static/images/promotion/20260713/1/background_5.jpg");
    }

    .store-share-section::before {
        background-image: url("/static/images/promotion/20260713/1/background_6.jpg");
    }

    .store-share-section::after {
        background-image: url("/static/images/promotion/20260713/1/background_7.jpg");
    }

    .hero-content {
        right: auto;
        bottom: 0;
        left: 50%;
        width: min(92vw, 1309px);
        gap: 0;
        transform: translateX(-50%);
    }

    .hero-bi {
        width: min(70vw, 873px);
    }

    .hero-catch {
        width: min(92vw, 1309px);
    }

    .hero-buttons {
        width: min(90vw, 900px);
        gap: 10%;
    }

    .hero-buttons a {
        width: min(45%, 399px);
    }

    .hero-arrow {
        display: none;
    }

    .cbt-card {
        top: 60%;
        width: min(92vw, 1350px);
        transform: translate(-50%, -50%);
    }

    .cbt-form {
        top: 53%;
        left: 25.2%;
        width: 31%;
        gap: clamp(12px, 1vw, 18px);
        transform: translate(-50%, -50%);
    }

    .region-tabs {
        width: 76%;
        gap: clamp(8px, 0.8vw, 14px);
    }

    .phone-field {
        height: clamp(40px, 3vw, 56px);
        border-radius: clamp(8px, 0.75vw, 12px);
    }

    .phone-prefix,
    .phone-field input {
        font-size: clamp(14px, 1.2vw, 20px);
    }

    .cbt-submit {
        width: min(58%, 320px);
    }

    .cbt-checks {
        gap: clamp(7px, 0.55vw, 10px);
        width: 92%;
        margin-top: 0;
    }

    .cbt-check {
        gap: clamp(8px, 0.6vw, 12px);
    }

    .cbt-check span {
        width: clamp(16px, 1.25vw, 22px);
        height: clamp(16px, 1.25vw, 22px);
    }

    .cbt-check b {
        font-size: clamp(12px, 0.85vw, 15px);
    }

    .intro-slider {
        z-index: 1;
        top: 25%;
        width: min(92vw, 1450px);
    }

    .slides {
        aspect-ratio: 1450 / 679;
    }

    .slide-dots {
        gap: 20px;
        margin-top: 22px;
    }

    .slide-dots button {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .slide-arrow {
        display: block;
    }

    .event-box {
        z-index: 1;
        width: min(62vw, 1189px);
    }

    .report-box,
    .red-cliff-box {
        top: 77%;
    }

    .report-mobile-button {
        display: none;
    }

    .report-button-hit {
        display: block;
        pointer-events: auto;
        visibility: visible;
        position: absolute;
        z-index: 2;
        left: 49.8%;
        top: 75.3%;
        width: 22.8%;
        height: 12.2%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        background: rgba(255, 255, 255, 0);
    }

    .red-cliff-video-frame {
        display: block;
        position: absolute;
        z-index: 2;
        top: 62.4%;
        left: 22%;
        width: 37.2%;
        aspect-ratio: 16 / 9;
        transform: translate(-50%, -50%);
        overflow: hidden;
        border: 4px solid rgba(232, 199, 150, 0.88);
        background: #140906;
        box-shadow:
            0 0 0 2px rgba(95, 38, 21, 0.85),
            0 16px 34px rgba(0, 0, 0, 0.32);
    }

    .red-cliff-video-frame iframe {
        width: 100%;
        height: 100%;
        display: block;
    }

    .red-cliff-youtube-button {
        display: none;
    }

    .level-box,
    .store-box {
        top: 29%;
    }

    .facebook-box {
        z-index: 1;
        top: 63%;
        width: min(90vw, 850px);
        gap: 50px;
    }

    .facebook-title {
        width: 85%;
        opacity: 1;
    }

    .facebook-button {
        width: min(42%, 358px);
    }

    .mobile-footer {
        display: none;
    }

    .pc-remote {
        position: fixed;
        top: 50%;
        right: max(20px, calc((100vw - 1920px) / 2 + 20px));
        z-index: 900;
        display: block;
        width: clamp(132px, 10vw, 200px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-50%);
        transition: opacity 0.22s ease, visibility 0.22s ease;
    }

    .pc-remote.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .pc-remote img {
        width: 100%;
    }

    .remote-hit {
        position: absolute;
        left: 12%;
        width: 76%;
        height: 6.4%;
        z-index: 2;
        background: rgba(255, 255, 255, 0);
        cursor: pointer;
    }

    .remote-hit::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 32%;
        z-index: 0;
        width: 160%;
        aspect-ratio: 266 / 61;
        opacity: 0;
        pointer-events: none;
        background-image: url("/static/images/promotion/20260713/99/remote_active.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transform: translate(-50%, -50%);
        transition: opacity 0.18s ease;
    }

    .remote-hit.is-active::before {
        opacity: 1;
    }

    .remote-hit-cbt {
        top: 20.9%;
    }

    .remote-hit-intro {
        top: 29.7%;
    }

    .remote-hit-report {
        top: 38.5%;
    }

    .remote-hit-level {
        top: 47.4%;
    }

    .remote-hit-red {
        top: 56.1%;
    }

    .remote-hit-store {
        top: 64.9%;
    }

    .remote-hit-survey {
        top: 94.2%;
        left: 22%;
        width: 56%;
        height: 5.3%;
    }

    #footer_nav {
        display: none !important;
        position: absolute !important;
        right: auto !important;
        bottom: 48px !important;
        left: 31% !important;
        z-index: 2;
        width: auto;
        margin-top: 0;
        padding: 0;
        gap: 0;
        background: transparent;
        transform: none !important;
        white-space: nowrap;
    }

    #footer_nav li {
        position: relative;
        padding: 0 16px;
    }

    #footer_nav li + li::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 1px;
        height: 12px;
        background: rgba(255, 255, 255, 0.35);
        transform: translateY(-50%);
    }

    #footer_nav a {
        color: #e4dbcf;
        font-size: 15px;
    }
}