@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap");

body,
html {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

html {
    scroll-behavior: smooth;
}
body {
    background-color: #ffffff;
    font-family: 'Noto Sans TC', sans-serif;
    overflow-x: hidden;
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999999;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    overflow: hidden;
}

.gate-top {
    position: relative;
    width: 100%;
    height: 50%;
    background-color: #050505;
    background-image: url("../img/loading_A.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    border-bottom: 2px solid #00faff;
    box-shadow: 0 5px 15px rgba(0, 250, 255, 0.2);
    transition: transform 0.8s cubic-bezier(0.8, 0, 0.2, 1);
    transform: translateY(0);
}

.gate-bottom {
    position: relative;
    width: 100%;
    height: 50%;
    background-color: #050505;
    background-image: url("../img/loading_B.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    border-top: 2px solid #ff00ff;
    box-shadow: 0 -5px 15px rgba(255, 0, 255, 0.2);
    transition: transform 0.8s cubic-bezier(0.8, 0, 0.2, 1);
    transform: translateY(0);
}

.gate-laser {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 20px #00faff, 0 0 40px #ff00ff;
    transform: translateY(-50%) scaleX(0);
    z-index: 2;
    transition: transform 0.4s ease-out, opacity 0.2s ease-in;
}

#loading-screen.unlocking .gate-laser {
    transform: translateY(-50%) scaleX(1);
}

#loading-screen.gate-open .gate-top {

    transform: translateY(-200%) translateX(-50%) scale(2) rotate(-30deg);
}
#loading-screen.gate-open .gate-bottom {

    transform: translateY(200%) translateX(50%) scale(2.1) rotate(-30deg);
}
#loading-screen.gate-open .gate-laser {
    opacity: 0;
}

/* ================= 開場動畫 END  ================= */

.image-container {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.image-container img {
    width: 100%;
    height: auto;
    display: block;
}
.bg {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 2560px;
    left: 50%;
    transform: translateX(-50%);
    height: 100vh;
    background-image: url("../img/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

.site-wrapper {
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
}

/* ================= SECTION KV ================= */
#section-kv {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #050505;
    background-image: url("../img/bg-top.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: clamp(172.5px, 46vw, 1177.6px);
    margin-bottom: clamp(18.75px, 5vw, 128px);
}

.kv-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.kv-middle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.kv-middle-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kv-character-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.kv-character-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kv-character-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(110deg, transparent 0%, transparent 30%, #ff1bf734 40%, transparent 50%, transparent 60%, #14e9e915 70%, transparent 80%, transparent 100%);

    background-size: 300% 100%;

    mix-blend-mode: color-dodge;

    -webkit-mask-image: url("../img/KV_webNpc.png");
    -webkit-mask-size: cover;
    -webkit-mask-position: center;
    mask-image: url("../img/KV_webNpc.png");
    mask-size: cover;
    mask-position: center;

    animation: cyberSweep 6s infinite alternate ease-in-out;
}

@keyframes cyberSweep {
    0% {
        background-position: 150% 0;
    }
    100% {
        background-position: -50% 0;
    }
}

#section-kv::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    background-image: url("../img/kv_link.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    z-index: 10;
    height: clamp(100px, 15.5vw, 400px);
    bottom: clamp(-125.4px, -4.9vw, -18.3px);
}

.alls_logo {
    position: absolute;
    height: auto;
    z-index: 3;
    transition: transform 0.2s;
    width: clamp(22.5px, 6vw, 136px);
    left: clamp(1.8px, 0.5vw, 12.8px);
    top: clamp(1.8px, 0.5vw, 12.8px);
}
.romlogo {
    position: absolute;
    height: auto;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.2s;
    width: clamp(33.75px, 9vw, 219px);
    left: clamp(23.6px, 7vw, 161.2px);
    top: clamp(3.7px, 1vw, 25.6px);
}
.romlogo:hover {
    transform: scale(0.95);
}
.slogan {
    position: absolute;
    height: auto;
    z-index: 3;
    transition: transform 0.2s;
    width: clamp(153.75px, 40.1045vw, 1027px);
    right: clamp(20.6px, 5.5vw, 140.8px);
    top: clamp(10.3px, 2.75vw, 70.4px);
}
.kv-buttons-container {
    position: absolute;
    display: flex;
    gap: 0;
    pointer-events: auto;
    z-index: 14;
    bottom: clamp(11.2px, 3vw, 76.8px);
    right: clamp(11.2px, 3vw, 76.8px);
}
.kv-button {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    outline: none !important;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    margin-left: clamp(-12.8px, -0.5vw, -1.8px);
}
.kv-button img {
    display: block;
    height: auto;
    width: clamp(48.75px, 13vw, 336px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
}
.kv-button:hover img {
    transform: translateY(-5px) scale(1.05);
}

.kv-button.active {
pointer-events: none;
}



/* ================= SECTION KV END ================= */

/* ================= SECTION 1 ================= */
#section-1 {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: flex-end;
    padding: clamp(7.5px, 2vw, 51.2px) 0 0;
}
.section-title01 {
    text-align: center;
    width: clamp(176.25px, 47vw, 1197px);
    margin-bottom: clamp(7.5px, 2vw, 51.2px);
}
.allseasons_box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
}
.s12,
.s34,
.s56 {
    position: relative;
    width: 100%;
    height: auto;
    background-size: cover;
    z-index: 1;
}
.s12 {
    background-image: url("../img/s12_bg.jpg");
    left: 0;
}
.s34 {
    background-image: url("../img/s34_bg.jpg");
}
.s56 {
    background-image: url("../img/s56_bg.jpg");
    right: 0;
}
.season-wrapper {
    display: flex;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.season-block {
    flex: 1;
    padding: 50px 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.block-header {
    background-color: #000;
    color: #fff;
    font-size: 3.8rem;
    text-transform: uppercase;
    font-family: 'Impact', 'Anton', sans-serif;
    padding: 0 clamp(4.5px, 1.2vw, 30.7px);
    margin-bottom: clamp(5.6px, 1.5vw, 38.4px);
}
.block-yellow .block-header span {
    color: #ffea00;
}
.block-magenta .block-header span {
    color: #e400c2;
}
.block-cyan .block-header span {
    color: #13dcf9;
}
.image-grid {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: clamp(3px, 0.8vw, 20.4px);
}
.img-btn {
    display: block;
    flex: 1;
    text-decoration: none;
    border: 3px solid #ffffff;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}
.img-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.img-btn:hover img {
    transform: scale(1.08);
}

/* ================= SECTION 2 ================= */
#section-2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    background-image: url("../img/bg_s2.png");
    background-size: cover;
    background-position: center top;
    padding-top: clamp(22.5px, 6vw, 153.6px);
    padding-bottom: clamp(93.7px, 25vw, 640px);
    margin-bottom: clamp(-435.2px, -17vw, -63.7px);
}
.container_s2 {
    width: 54%;
    margin: 0 auto;
}
.section-title02 {
    text-align: center;
    margin-bottom: 40px;
    width: clamp(195px, 52vw, 1315px);
}
.schedule-ex {
    font-size: 1.1rem;
    font-weight: 500;
    position: relative;
    width: 100%;
    text-align: center;
    letter-spacing: 1px;
    background: #00faff;
    padding: clamp(0.9px, 0.25vw, 6.4px) 0;
    margin-bottom: clamp(3.7px, 1vw, 25.6px);
}
.info-row {
    display: flex;
    gap: clamp(3.7px, 1vw, 25.6px);
    margin: clamp(5.6px, 1.5vw, 38.4px) 0;
}
.info-box {
    display: flex;
    flex: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.info-label {
    background-color: #000;
    color: #fff;
    font-weight: 500;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3.7px, 1vw, 25.6px) clamp(6.5px, 1.75vw, 44.8px);
}
.info-value {
    background-color: #000000d1;
    color: #fff;
    font-size: 1.1rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}
.schedule-card {
    background-color: #000000d1;
    text-align: center;
    transition: transform 0.3s;
    padding: clamp(3.7px, 1vw, 25.6px) clamp(7.5px, 2vw, 51.2px);
}
.schedule-card:hover {
    transform: translateY(-2px);
    background-color: #000000e8;
}
.schedule-card h3 {
    font-size: 2rem;
    font-weight: bold;
    border-bottom: 1px solid #565656;
    margin-bottom: clamp(1.8px, 0.5vw, 12.8px);
    padding-bottom: clamp(1.8px, 0.5vw, 12.8px);
}
.schedule-card p {
    color: #fff;
    font-size: 1.6rem;
    margin: 0;
}
.text-yellow {
    color: #f7f501;
}
.text-cyan {
    color: #14e9e9;
}
.text-magenta {
    color: #ff1bf7;
}

/* ================= SECTION 3 ================= */
#section-3 {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
}
.rewards-layout {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    grid-template-columns: minmax(clamp(95.8px, 25.56vw, 654.3px), 27%) 1fr;
    margin-left: clamp(18.7px, 5vw, 128px);
}
.section-title03 {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
    z-index: 2;
    align-self: end;
    width: clamp(187.5px, 50vw, 1264px);
    margin-bottom: clamp(9.3px, 2.5vw, 64px);
}
.rewards-box {
    grid-column: 2;
    grid-row: 2;
    background-color: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.image-wrapper-container {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    z-index: 2;
}
.image-block {
    width: 100%;
    height: 100%;
    background-color: #5ab13e;
    overflow: hidden;
}
.image-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.character-overlay {
    position: absolute;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
    width: clamp(113.25px, 30.15vw, 772px);
    right: clamp(-27.9px, -1.09vw, -4px);
}
.tabs-header {
    display: flex;
    background-color: #000;
}
.tab-btn {
    flex: 1;
    text-align: center;
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #000;
    color: #fff;
    border: none;
    border-bottom: 1px solid #222;
    padding: clamp(9.3px, 2.5vw, 64px) 0;
}
.tab-btn:hover {
    color: #f7f501;
}
.tab-btn.active {
    border-bottom: 0 solid #222;
    font-weight: 600;
    background-color: #f7f501;
    color: #000;
}
.tab-content {
    display: none;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: clamp(7.5px, 2vw, 51.2px);
}
.tab-content.active {
    display: flex;
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.items-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-end;
    gap: clamp(3px, 0.8vw, 20.4px);
}
.item-wrapper {
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
    cursor: pointer;
}
.item-wrapper:hover {
    transform: scale(1.05);
}
.item-wrapper.special {
    width: auto;
    background-color: #ff53c6;
    padding: clamp(2.6px, 0.7vw, 17.9px);
}
.item-wrapper.special .item-img-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-wrapper.special .item-name {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    padding: clamp(1.5px, 0.4vw, 10.2px) 0;
}
.item-wrapper.special .item-name .sp-title {
    color: #fff200;
    font-size: 1.65rem;
    font-weight: 700;
    display: block;
    margin-bottom: clamp(0px, 0.1vw, 2.5px);
}
.item-wrapper.normal {
    width: auto;
}
.item-wrapper.normal .item-img-box {
    width: 100%;
    height: auto;
    background-color: #333333;
    box-shadow: inset -2px 0 0 #00e5ff, inset 0 2px 0 #00e5ff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-wrapper.normal .item-name {
    display: flex;
    background-color: #f7f501;
    color: #212121;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    align-items: center;
    justify-content: center;
    height: clamp(10.3px, 2.75vw, 70.4px);
}
.item-wrapper.normal .item-img-box img {
    max-width: 80px;
    max-height: 80px;
    display: block;
    padding: clamp(4.6px, 1.25vw, 32px) clamp(3.7px, 1vw, 25.6px);
}
.item-img-box img {
    width: clamp(26.25px, 7vw, 160px);
    height: clamp(26.25px, 7vw, 160px);
    display: block;
}
.action-btns {
    display: flex;
    justify-content: center;
    margin-top: clamp(7.5px, 2vw, 51.2px);
}
.btnLong02-img {
    width: clamp(93.75px, 25vw, 635px);
    display: block;
    transition: transform 0.3s;
}
.btnLong02-img:hover {
    transform: translateY(-5px);
}
.btnLong01-img {
    width: clamp(93.75px, 25vw, 635px);
    display: block;
    transition: transform 0.3s;
    cursor: pointer;
}
.btnLong01-img:hover {
    transform: translateY(-5px);
}
.s3footer {
    position: absolute;
    right: 0;
    background: #000;
    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 8vw) 100%, calc(100% - 9vw) calc(100% - 1vw), 0 calc(100% - 1vw));
    display: flex;
    bottom: clamp(-23px, -0.9vw, -3.3px);
    width: clamp(60px, 16vw, 409.6px);
    height: clamp(3.7px, 1vw, 25.6px);
}

/* ================= SECTION 4 ================= */
#section-4 {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    background-size: cover;
    align-items: center;
    padding-top: clamp(22.5px, 6vw, 153.6px);
    bottom: clamp(-25.6px, -1vw, -3.7px);
}
.team_c,
.team_j {
    position: relative;
    width: 50%;
    height: auto;
    z-index: 1;
}
.team_c:hover,
.team_j:hover {
    z-index: 10;
}
.image-container-team {
    position: relative;
    display: block;
    width: 100%;
}
.image-container-team img {
    display: block;
    width: 100%;
    transition: transform 0.3s ease, filter 0.3s;
    z-index: 2;
}
.image-container-team .hitbox {
    position: absolute;
    left: 0;
    width: 100%;
    height: 80%;
    z-index: 10;
    cursor: pointer;
    outline: none !important;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    bottom: clamp(3.7px, 1vw, 25.6px);
}
.image-container-team .hitbox:hover + img {
    transform: translateY(-10px) scale(1.05);
}
.image-container-team .hitbox:not(:hover) + img {
    transform: translateY(0) scale(1);
    filter: brightness(1);
}

/* ================= SECTION 5 ================= */
#section-5 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    background-image: url("../img/bg_s5.png");
    background-size: cover;
    background-position: center bottom;
    padding: clamp(30px, 8vw, 204.8px) 0 clamp(22.5px, 6vw, 153.6px);
}
.section-title05 {
    text-align: center;
    z-index: 2;
    width: clamp(180px, 48vw, 1212px);
    margin-bottom: clamp(9.3px, 2.5vw, 64px);
}
.notice {
    position: relative;
    width: 100%;
    height: auto;
}
.container_s5 {
    width: 58%;
    margin: 0 auto;
}
.notice-deco-img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 80%;
    max-height: 600px;
    width: auto;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
}
.notice-content-wrapper {
    position: relative;
    padding: clamp(5.6px, 1.5vw, 38.4px);
}
.notice-content-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 5px solid #00e5ff;
    border-left: 5px solid #00e5ff;
    width: clamp(3.7px, 1vw, 25.6px);
    height: clamp(3.7px, 1vw, 25.6px);
}
.notice-content-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 5px solid #00e5ff;
    border-right: 5px solid #00e5ff;
    width: clamp(3.7px, 1vw, 25.6px);
    height: clamp(3.7px, 1vw, 25.6px);
}
.notice-list {
    counter-reset: notice-counter;
    list-style: none;
}
.notice-list li {
    position: relative;
    font-size: 1.1rem;
    letter-spacing: 1px;
    line-height: 1.5;
    color: #2e2e2e;
    padding-left: clamp(8.2px, 2.2vw, 56.3px);
    margin-bottom: clamp(2.8px, 0.75vw, 19.2px);
}
.notice-list li::before {
    counter-increment: notice-counter;
    content: counter(notice-counter);
    position: absolute;
    left: 0;
    top: 2px;
    background-color: #14e9e9;
    box-shadow: 3px 3px 0 #fff200;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(4.1px, 1.1vw, 28.1px);
    height: clamp(3.7px, 1vw, 25.6px);
    padding-bottom: clamp(0.3px, 0.1vw, 2.5px);
}

#gotop {
    position: absolute;
    height: auto;
    z-index: 10;
    cursor: pointer;
    transition: transform 0.2s;
    width: clamp(45px, 3.7vw, 127px);
    right: clamp(12px, 3.5vw, 90px);
    bottom: clamp(11.2px, 3vw, 76.8px);
}
#gotop:hover {
    transform: scale(0.95);
}

/* ================= FOOTER ================= */
#section-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: #000;
}
#footbox {
    width: 100%;
}

/* =========================================================
   RWD 
========================================================= */
@media screen and (max-width: 1024px) {
    .container_s2,
    .container_s5 {
        width: 85%;
    }
    .slogan {
        width: 50vw;
    }
    .section-title01,
    .section-title02,
    .section-title03,
    .section-title05 {
        width: 70vw;
    }
    .notice-content-wrapper {
        padding-right: 10vw;
    }

    .kv-bg-video {
        display: none;
    }

    .kv-character-overlay {
        display: none;
    }

    .kv-middle-overlay {

        display: none;
    }

}

@media screen and (max-width: 768px) {
    .bg {
        background-image: url("../img/bgM.jpg");
    }
    #section-kv {
        width: 100%;
        aspect-ratio: 9 / 16;
        height: auto;
        background-position: top center;
        background-size: cover;
        background-image: url("../img/bg-topM.jpg");
    }
    .slogan {
        display: none;
    }
    .alls_logo {
        width: 14vw;
        left: 31.5vw;
        top: 2.5vw;
    }
    .romlogo {
        width: 22vw;
        left: 47vw;
        top: 4vw;
    }
    .kv-buttons-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1vw;
        width: 90vw;
        bottom: 5vw;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .kv-button {
        margin-left: 0;
        width: 100%;
    }
    .kv-button img {
        width: 100%;
        height: auto;
        max-width: none;
    }
    .kv-button:hover img {
        transform: translateY(0px) scale(1.05);
    }
    #section-kv::after {
        height: 25vw;
        bottom: -8vw;
    }

    .section-title01 {
        width: 90vw;
        margin: 6vw auto;
    }
    .allseasons_box {
        flex-direction: column;
    }
    .season-block {
        padding: 7vw 5vw;
    }
    .block-header {
        font-size: 2.2rem;
        margin-bottom: 4vw;
        padding: 0 4vw;
    }
    .image-grid {
        flex-direction: row;
        gap: 3vw;
    }
    .img-btn {
        width: 100%;
    }

    #section-2 {
        background-position: unset;
    }
    .container_s2 {
        width: 90%;
    }
    .section-title02 {
        width: 90vw;
        margin: 6vw auto;
    }
    .info-box {
        display: flex;
        flex-direction: column;
    }
    .info-row {
        flex-direction: column;
        gap: 3vw;
    }
    .info-label {
        padding: 3vw;
        font-size: 1.2rem;
    }
    .info-value {
        padding: 3vw;
        font-size: 1.1rem;
    }
    .schedule-ex {
        padding: 1vw 0;
        margin: 8vw 0 4vw;
    }
    .schedule-grid {
        grid-template-columns: 1fr;
        gap: 4vw;
    }
    .schedule-card {
        padding: 4vw;
    }
    .schedule-card h3 {
        font-size: 1.8rem;
        padding-bottom: 2vw;
        margin-bottom: 2vw;
    }
    .schedule-card p {
        font-size: 1.4rem;
    }
    .btnLong01-img {
        width: 80vw;
        margin-top: 0;
        margin-bottom: 5vw;
    }

    .s3footer {
        display: none;
    }
    .rewards-layout {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        margin-left: 0;
        padding: 0 5vw;
    }
    .section-title03 {
        width: 90vw;
        margin: 6vw auto;
        order: 1;
        align-self: center;
    }
    .image-wrapper-container {
        order: 2;
        width: 100%;
        margin-bottom: 5vw;
        height: auto;
        display: none;
    }
    .character-overlay {
        width: 60vw;
        right: -2vw;
        bottom: 0;
    }
    .tabs-header {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }
    .tab-btn {
        padding: 3vw 1vw;
        font-size: 0.95rem;
        border-right: 1px solid #222;
        border-bottom: 1px solid #222;
    }
    .tab-btn:nth-child(3n) {
        border-right: none;
    }
    .items-grid {
        gap: 5vw;
        margin-top: 10vw;
    }
    .item-wrapper.special .item-img-box img {
        width: 24vw;
        height: auto;
    }
    .item-wrapper.normal .item-img-box img {
        width: 20vw;
        height: 20vw;
        max-width: none;
        max-height: none;
        padding: 4vw 3vw;
    }
    .item-wrapper.normal .item-name {
        height: 14vw;
        width: 31vw;
        padding: 1vw 0;
        font-size: 0.95rem;
    }
    .btnLong02-img {
        width: 75vw;
        margin-top: 10vw;
        margin-bottom: 10vw;
    }
    .item-wrapper.special {
        padding: 6vw 3vw 3vw;
        margin-bottom: 3vw;
    }
    .item-wrapper.special .item-img-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .item-wrapper.special .item-name {
        font-size: 1rem;
        letter-spacing: 1px;
        margin-top: 3vw;
    }
    .item-wrapper.special .item-name .sp-title {
        font-size: 1.4rem;
        margin-bottom: 0.3vw;
    }
    .rewards-box {
        overflow: hidden;
    }
    .tab-content {
        display: none !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        padding: 5vw;
        flex-direction: column;
        justify-content: center;
    }
    .tab-content.active {
        display: flex !important;
        animation: fadeInMobile 0.3s ease-out forwards;
    }
    @keyframes fadeInMobile {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #section-4 {
        flex-direction: column;
        padding-top: 15vw;
        gap: 6vw;
    }
    .team_c,
    .team_j {
        width: 100%;
    }
    .image-container-team .hitbox {
        height: 100%;
        bottom: 0;
    }

    .container_s5 {
        width: 90%;
    }
    .section-title05 {
        width: 90vw;
        margin: 6vw auto;
    }
    .notice-content-wrapper {
        padding: 5vw;
        margin-bottom: 22vw;
    }
    .notice-content-wrapper::after,
    .notice-content-wrapper::before {
        width: 4vw;
        height: 4vw;
    }
    .notice-deco-img {
        display: none;
    }
    .notice-list li {
        font-size: 1rem;
        padding-left: 8vw;
        margin-bottom: 5vw;
    }
    .notice-list li::before {
        width: 5.5vw;
        height: 5.5vw;
        font-size: 1rem;
        top: 0;
        padding-bottom: 0;
    }
    #gotop {
        width: 15vw;
        right: 4vw;
        bottom: 8vw;
    }

    .gate-top {
        background-color: #050505;
        background-image: url("../img/loadingM_A.jpg");
    }

    .gate-bottom {
        background-color: #050505;
        background-image: url("../img/loadingM_B.jpg");
    }

    #loading-screen.gate-open .gate-top {

        transform: translateY(-500%) translateX(-50%) scale(3.5) rotate(-40deg);
    }
    #loading-screen.gate-open .gate-bottom {

        transform: translateY(500%) translateX(50%) scale(3.5) rotate(-40deg);
    }
    #loading-screen.gate-open .gate-laser {
        opacity: 0;
    }

}