@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;
}
/* 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;
}

/* Utility Class */
.u-font-futura {
    font-family: var(--f-en);
    font-weight: 700;
}
.u-uppercase {
    text-transform: uppercase;
}

.ticket .ticket__wrap {
    padding: 0px 16px;
}

.ticket .ticket__wrap .sales_period-block {
    padding: 24px 0;
    font-size: var(--fs-16);
}

.ticket__wrap .sales_period-block > h3 {
    font-size: var(--fs-14);
    font-weight: 500;
    color: var(--c-text-white);
    background: var(--c-text-main);
    display: inline-block;
    padding: 0 12px;
}

.ticket__wrap .sales_period-block > .period__time {
    border-bottom: 1px solid var(--c-text-main);
    padding: 8px 0 8px 16px;
}

.ticket__wrap .sales_period-block > .period__arina {
    position: relative;
    padding: 8px 0 8px 40px;
    border-bottom: 1px solid var(--c-text-main);
}

.ticket__wrap .sales_period-block > .period__arina::after {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    left: 16px;
    top: 13px;
    background: #e9e6ff;
}

.ticket .period__btn {
    width: 100%;
    padding: 0 0 72px 0;
    display: inline-block;
}

.ticket .period__btn img {
    max-width: 334px;
    width: 72%;
    margin: 0 auto;
}

.ticket .ticket__caution-block {
    background-color: #f4f4f4;
    padding: 72px 0 12px 0;
}

.ticket .ticket__caution-block > h2 {
    font-size: var(--fs-20);
    padding: 0 0 24px 0;
    text-align: center;
    color: #000;
}

.ticket .ticket__caution-block > p {
    font-size: var(--fs-18);
    text-align: center;
    padding-bottom: 4px;
    color: #000;
}

.ticket .ticket__caution-block .ticket__caution-text {
    text-decoration-line: underline;
    text-underline-offset: 5px;
}

.ticket .notes__list > li {
    font-size: var(--fs-16);
}

.notes__sub-title {
    font-size: 18px;
}

.notes__contact p > a {
    color: #000;
}

.notes__sub-title::before {
    background-color: var(--c-text-main);
}

@media screen and (min-width: 1025px) {
    :root {
        --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-62: 62px;
        --head-height: 88px;
    }
}