@charset "UTF-8";

/* =========================================
   1. BASE (Biến & Reset)
   ========================================= */
@font-face {
    font-family: Gotham;
    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: #0065bb;
    --c-text-white: #ffffff;
    --c-bg-body: #ffffff;

    /* --- Fonts --- */
    --f-en: Gotham, sans-serif;
    --f-jp: "SicUVeiw", 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-30: 48px;
    --fs-62: 62px;

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

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

/* Reset cơ bản */
* {
    margin: 0px;
    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.4;
    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, 24px);
    }

    .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: #00dee7;
    }

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

    /* NEWS */

    .news {
        /* margin: 0 500px 0 500px; */
        max-width: 920px;
        margin: 0 auto;
    }

    .news .news__wrapper {
        max-width: 920px;
        margin: 0 auto;
        display: flex;
        justify-content: start;
        gap: 65px;
    }

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

    .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: 32px;
        max-width: 920px;
    }

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

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

    #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: 40px;
        padding: 34px 0 0 0;
    }

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

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

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

    #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: 320px;
        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_inner {
        display: flex;
        gap: 24px;
    }

    .archives .archives__btn-block {
        width: 920px;
        margin: 0 auto;
        flex-direction: row;
        column-gap: 16px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* 上段2枚の設定 */
    .archives .archives__btn-block > a {
        width: calc(50% - 12px);
        display: block;
    }

    /* 下段3枚の設定 */
    .archives .archives__btn-block > a:nth-child(3) {
        width: calc(50% - 12px);
    }

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

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

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

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

    .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(14px, 1.24vw, 14px);
    }

    .footer .footer__privacy-list {
        display: flex;
        padding: unset;
    }

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

    .footer__logos .logo__ttc {
        width: 100%;
    }

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

    .notes__group {
        padding: 20px 0;
    }

    .contact .notes__group:last-child {
        /* max-width: 980px; */
        margin: 0 auto;
        padding-bottom: 160px;
    }

    .ticket__caution-block .notes__group:last-child {
        max-width: 980px;
    }

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

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

    .coming-soon {
        display: block;
        text-align: center;
        width: 100%;
        color: var(--c-text-white);
        font-size: 26px; /* 指定のサイズ */
        font-family: "sicUveiw-DB", sans-serif; /* 指定のフォント */
        font-weight: normal; /* フォント自体に太さがある場合はnormalでOK */
        letter-spacing: 0.1em;
        padding: 16px 0;
    }

    .section__title {
        font-family: var(--f-en);
        font-size: var(--fs-22);
        color: var(--c-text-main);
        text-align: center;
        margin-bottom: 40px;
        letter-spacing: -0.05em;
        line-height: 1;
    }

    /* 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 {
        max-width: 980px;
        margin: 0 auto;
    }

    .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>figure>img {
        max-width: 744px;
        margin: 0 auto;
    }

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

    .archives .archives__list {
        gap: 32px;
        max-width: 63rem;
        margin: 0 auto;
    }

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

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

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

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

@media screen and (min-width: 768px) {
    /* ARCHIVES ページ */
    .archives {
        padding: 80px 0 160px 0;
    }

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

    .archives__list > li {
        gap: 32px;
        padding: 0 0 32px 0;
    }

    .archives__list {
        margin: 0 auto;
        max-width: 1040px;
        padding: 0 60px;
    }
}

/* =========================================
   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: Gotham, sans-serif;
        --f-jp: "SicUVeiw", 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.5vw;
        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%;
    }
}