@charset "UTF-8";

/* =========================================
   1. BASE (Biến & Reset)
   ========================================= */
@font-face {
    font-family: 'Futura';
    src: url('../fonts/Futura\ Medium.otf') format('otf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

/* #news,
#concept,
#info,
#mc,
#special-guest
#model,
#brand,
#sponsor,
#archives {
  scroll-margin-top: 80px;
} */

#artist {
    scroll-margin-top: 25vh;
}

:root {
    /* --- Colors --- */
    --c-text-main: #00146E;
    --c-text-white: #FFFFFF;
    --c-bg-body: #FFFFFF;

    /* --- Fonts --- */
    --f-en: 'Futura', sans-serif;
    --f-jp: 'Sawarabi Gothic', sans-serif;

    /* --- Font Sizes (Mobile Base) --- */
    --fs-10: 10px;
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-26: 26px;
    --fs-28: 28px;
    --fs-62: 62px;

    /* --- Spacing --- */
    --sp-padding-side: 16px;

    /* Header height */
    --head-height: 48px;
}

/* Reset cơ bản */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

body {
    font-family: var(--f-jp);
    font-size: var(--fs-12);
    color: var(--c-text-main);
    background-color: var(--c-bg-body);
    line-height: 1.6;
    overflow-x: hidden;
}

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


/* =========================================
   PC STYLES (Màn hình >= 1280px)
   ========================================= */
@media screen and (min-width: 1025px) {


    :root {
        /* --- Font Sizes (Mobile Base) --- */
        --fs-10: 16px;
        --fs-12: 18px;
        --fs-14: 18px;
        --fs-16: 22px;
        --fs-18: 26px;
        --fs-20: 20px;
        --fs-22: 62px;
        --fs-24: 24px;
        --fs-26: 26px;
        --fs-28: 28px;

        /* --- Spacing --- */
        --sp-padding-side: 16px;

        /* Header height */
        --head-height: 88px;
    }

    .section {
        padding-top: 160px;
        padding-bottom: 160px;
    }

    .header__btn-open,
    .nav__btn-close,
    .nav-bg-overlay {
        display: none !important;
    }

    .header__bar {
        height: var(--head-height);
        padding: 0 10.63vw;
        gap: 20px;
    }

    .header__logo-small img {
        height: 64px;
        object-fit: contain;
    }

    /* 2. RESET NAV OVERLAY*/
    .nav-overlay {
        position: static;
        width: auto;
        height: auto;
        background-color: transparent;
        padding: 0;
        right: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 30px;
        transform: none;
        transition: none;
        opacity: 1;
        visibility: visible;
    }

    /* 3. CHỈNH SỬA LIST MENU (Xếp ngang) */
    .nav__list {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 0;
        gap: clamp(27px, 2.7vw, 48px);
        line-height: 3.2;
    }

    .nav__item {
        margin-bottom: 0;
        padding-bottom: 0;
        padding-right: 0;
        border-bottom: none;
        font-size: 16px;
    }

    .nav__item:not(:first-child) {
        padding: unset;
        margin-bottom: unset;
        border-bottom: unset;
    }

    .nav__item:not(:first-child)>a {
        color: var(--c-text-white);
        /* font-size: var(--fs-28); */
        font-size: clamp(16px, 1.5vw, 28px);
    }

    .nav__item:first-child {
        margin-bottom: 0;
    }

    .nav__item:first-child>a {
        width: auto;
        padding: 8px 24px;
        font-size: 14px;
        background-color: var(--c-text-main);
        color: #FFF;
        border: 1px solid var(--c-text-main);
        transition: 0.3s;
    }

    .nav__item:first-child>a:hover {
        background-color: #FFF;
        color: var(--c-text-main);
    }

    .nav__item.ticket--pc {
        padding: 0px 30px;
        background-color: var(--c-text-white);
        line-height: var(--head-height);
    }

    .nav__item.ticket--pc>a {
        color: #DAC1FF;
    }

    /* 5. INSTAGRAM ICON */
    .nav__insta {
        margin-top: 0;
        width: 24px;
    }

    .nav-overlay .nav__list>li:first-child {
        display: none;
    }

    .nav-overlay .nav__insta {
        display: none;
    }

    .hero {
        margin-top: calc(var(--head-height) + 40px);
    }

    .hero__slider .swiper-wrapper .swiper-slide {
        padding: 0 16px;
        height: 100%;
    }

    .hero__main-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: auto;
        /* margin-top: -165px; */
        /* margin-top: -10vh; */
        margin: unset;
        width: 700px;
    }

    .hero__slider.swiper-initialized {
        opacity: 1;
        visibility: visible;
    }

    /* 1. Giới hạn chiều cao của khung Slider */
    .hero__slider {
        /* height: 42vh; */
        height: clamp(280px, 42dvh, 650px);
        max-height: 650px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.6s ease, visibility 0.6s ease;
    }

    /* 2. Ép Slide co lại theo nội dung ảnh */
    .hero__slide {
        width: auto !important;
        height: 100%;
    }

    .hero__slide img {
        height: 100%;
        width: auto;
        max-width: none;
        object-fit: contain;
        aspect-ratio: attr(width) / attr(height);
    }

    .hero__open-time {
        padding-top: 200px;
        padding-bottom: 40px;
    }

    .hero__cta {
        gap: 32px;
    }

    .hero__cta-btn img {
        margin: 0 auto;
        width: 43%;
    }

    /* NEWS */

    .news {
        margin: 0 16.15vw 0 16.15vw;
    }

    .news .news__wrapper {
        display: flex;
        justify-content: start;
        gap: 65px;
    }

    .news .section__title {
        font-size: var(--fs-62);
    }

    .news .news__wrapper>nav {
        width: 80%;
    }

    .news__list li {
        line-height: 3;
    }

    .news__list li>a {
        line-height: 2;
    }

    #news>.news__cta-btn {
        width: 100%;
        text-align: right;
        padding-top: 72px;
    }

    /* CONCEPT */
    #concept {
        background-image: url("../images/TTC_HP_concept_背景_PC.png");
    }

    .concept__wrapper {
        display: flex;
        justify-content: center;
        gap: 72px;
    }

    #concept .concept__block {
        padding-top: unset;
        text-align: start;
        padding-bottom: 80px;
    }

    #concept .concept__block>p:first-child {
        padding-bottom: 24px;
    }

    #concept>.concept__cta-btn {
        display: inline-flex;
        justify-content: center;
        width: 100%;
        padding-left: 5%;
    }

    #concept>.concept__cta-btn>img {
        min-width: 336px;
        width: 19%;
    }

    #concept>.concept__cta-btn>a {
        width: 336px;
        display: inline-block;
    }

    #concept .u-sp-only {
        display: none;
    }

    /* INFO */
    .info .info__wrapper {
        display: flex;
        justify-content: center;
        gap: 128px;
        padding: 72px 0 0 0;
    }

    .info .map-box {
        min-width: 448px;
    }

    #info .map-box>iframe {
        /* height: 42vh; */
        height: 100%;
    }

    #info .info__list>li>h4 {
        margin-bottom: 32px;
    }

    #info .info__list>li {
        padding-bottom: 32px;
    }

    /* mc  */
    .mc .guest-list {
        grid-template-columns: 1fr 1fr;
        gap: 16px 8px;
        padding: 0;
    }


    /* ゲスト */
    .cameOut__wrap {
        background-image: url("../images/TTC_HP_GUEST_背景_PC.png");
        padding-bottom: 160px;
    }

    .cameOut__wrap .guest-list {
        display: flex;
        justify-content: center;
        gap: 64px;
    }

    .cameOut__wrap .guest-card {
        width: 29%;
        max-width: 512px;
        min-width: 256px;
    }

    .cameOut__wrap .section__title {
        margin-bottom: 40px;
    }

    .guest-card__name {
        padding-bottom: 16px;
    }

    .guest-card__sns-list>li {
        width: 32px;
    }

    .cameOut__wrap .section {
        padding-bottom: 96px;
    }

    .special-guest .guest-card {
        /* max-width: 512px; */
        width: 42%;
        max-width: unset;
    }

    .model .guest-list > .guest-card:first-child {
        padding: 0 0 40px 0 ;
    }

    /* #brand,
    #sponsor {
        padding-left: 408px;
        padding-right: 408px;
    } */

    #brand>nav,
    #sponsor>nav {
        padding-left: 18vw;
        padding-right: 18vw;
    }

    .brand .brand__list {
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        gap: 48px;
    }

    /* archive */
    .archives .section__title {
        margin-bottom: 40px;
    }

    .archives .archives__btn-block {
        flex-direction: row;
        padding: 0 10.68vw;
    }

    .archives .archives__btn-block {
        gap: 24px;
    }

    .cta__btns {
        background-image: url("../images/TTC_HP_CTA_背景_PC.png");
    }

    .cta__btns>.cta__btns-block {
        gap: 32px;
    }

    .cta__btns.section {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    /* FOOTER */
    .footer {
        padding: 80px 10.68vw 43px 10.68vw;
    }

    .footer__nav-wrapper {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .footer .footer__nav-list {
        border-bottom: unset;
        padding: unset;
        display: flex;
        gap: 43px;
        padding-right: 107px;
        padding-left: 50px;
    }

    .footer__logos .logo__instagram {
        position: absolute;
        right: 0;
        top: 0px;
        width: 64px;
    }

    .footer__privacy-wrapper {
        padding-top: 124px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer__privacy-wrapper .footer__copy {
        padding-left: 48px;
        font-size: clamp(16px, 1.24vw, 20px);
    }

    .footer .footer__privacy-list {
        display: flex;
        gap: clamp(35px, 3vw, 45px);
        padding: unset;
    }

    .footer .footer__privacy-list>li>a {
        font-size: clamp(16px, 1.24vw, 20px);
    }

    .footer__logos .logo__ttc {
        width: 100%;
    }


    /* CAUTION */
    .notes {
        padding: 0 450px;
    }

    .notes__group {
        padding: 20px 0;
    }

    .contact .notes__group:last-child {
        padding-bottom: 160px;
    }

    .contact .notes__main-title {
        padding-top: 80px;
        padding-bottom: 72px;
    }

    .notes__sub-title::before {
        width: 16px;
        height: 16px;
    }


    /* TICKET PAGE */
    .ticket .ticket__wrap {
        display: flex;
        align-items: center;
        gap: 60px;
    }

    .ticket .ticket__wrap>figure {
        max-width: 50%;
    }

    .ticket .sales_period-block {
        max-width: 50%;
        width: 100%;
    }

    .ticket__wrap .sales_period-block>.period__arina {
        padding-top: 24px;
    }

    .ticket__wrap .sales_period-block>.period__arina::after {
        top: 34px;
    }

    .ticket .period__btn {
        padding-top: 40px;
    }

    .ticket.notes {
        padding: 0;
    }

    .ticket .ticket__block {
        padding: 0 450px;
    }

    .ticket .ticket__caution-block {
        padding-top: 160px;
        padding-left: 450px;
        padding-right: 450px;
    }

    /* 注意事項ページ */
    .notes>h2 {
        padding-top: 80px;
        padding-bottom: 72px;
    }

    .notes>.notes__group:last-child {
        padding-bottom: 160px;
    }

    /* ARCHIVES ページ */
    .archives {
        padding-top: 72px;
    }

    .archives>figure>img {
        max-width: 744px;
        margin: 0 auto;
    }

    .archives>figure {
        padding-bottom: 72px;
    }

    .archives .archives__list {
        gap: 32px;
        padding: 0 calc(450px - 32px);
    }

    .archives__list li:nth-child(4n + 1) {
        width: calc(38% - 32px);
        /* 32px = gap/2 */
    }

    .archives__list li:nth-child(4n + 2) {
        width: calc(62% - 32px);
    }

    /* Hàng chẵn: 70% – 30% */
    .archives__list li:nth-child(4n + 3) {
        width: calc(62% - 32px);
    }

    .archives__list li:nth-child(4n + 4) {
        width: calc(38% - 32px);
    }
}


/* =========================================
   TABLET STYLES (Màn hình >= 768px)
   ========================================= */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    :root {
        /* --- Colors --- */
        --c-text-main: #00146E;
        --c-text-white: #FFFFFF;
        --c-bg-body: #FFFFFF;

        /* --- Fonts --- */
        --f-en: 'Futura', sans-serif;
        --f-jp: 'Sawarabi Gothic', sans-serif;

        /* --- Font Sizes (Mobile Base) --- */
        --fs-10: 10px;
        --fs-12: 12px;
        --fs-14: 14px;
        --fs-16: 16px;
        --fs-18: 22px;
        --fs-20: 20px;
        --fs-22: 48px;
        --fs-24: 24px;
        --fs-26: 26px;
        --fs-28: 28px;
        --fs-62: 62px;

        /* --- Spacing --- */
        --sp-padding-side: 8.5vw;

        /* Header height */
        --head-height: 48px;
    }

    .hero__slide img {
        aspect-ratio: attr(width) / attr(height);
    }

    .guest-list {
        grid-template-columns: 1fr 1fr;
        padding: 0;
    }

    #info .map-box>iframe {
        height: 350px;
    }

    .info .info__wrapper {
        display: flex;
        justify-content: center;
        gap: 5.50vw;
        align-items: center;
    }

    .special-guest .guest-list {
        grid-template-columns: 1fr;

    }

    .guest-card__sns-list>li {
        width: 28px;
    }

    .brand .brand__list {
        text-align: center;
    }

    .brand .brand__list>li {
        max-width: 300px;
    }

    .cta__btns>.cta__btns-block>a {
        width: 50%;
    }

    
}