/* -------------------------------------------------- */
/* COMMON PARTS */
/* -------------------------------------------------- */

:root {
    --100vw: 100vw;
}

html {
    font-size: 62.5%;
    letter-spacing: 0;
    font-family: "Noto Sans JP", sans-serif;
    -webkit-text-size-adjust: none;
}

@media screen and (min-width: 1080.01px) and (max-width: 1919.99px) {
    html {
        font-size: calc(10 / 1920 * 100 * 1vw);
    }
}

/* あまりにも文字サイズが小さくなった場合 */
@media screen and (min-width: 767.01px) and (max-width: 1080px) {
    html {
        font-size: calc(12 / 1920 * 100 * 1vw);
    }
}

/* スマホ用（デザインサイズが375の場合）
   744px 前後の iPad 等で vw が膨らみすぎないよう上限を付与 */
@media screen and (max-width: 767px) {
    html {
        font-size: clamp(10px, calc(10 / 375 * 100 * 1vw), 12px);
    }
}

body {
    margin: 0;
    padding: 0;
}

:root {
    /* fonts */
    --Noto: "Noto Sans JP", sans-serif;
    --Roboto: "Roboto", sans-serif;
    /* section title gradient blobs */
    --color-blob-blue: #0c79e9;
    --color-blob-pink: #de56b8;
}

@media screen and (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
        background-color: #000000;
    }

    #contents {
        overflow-x: hidden;
        max-width: 100%;
        background-attachment: scroll;
    }
}

.inner {
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .inner {
        /* width: calc(100% - 3rem); */
    }
}

.inner1 {
    max-width: 120rem;
    width: 90%;
    margin: 0 auto;
}

.client_voice {
    width: 34.6rem;
    height: 6.1rem;
    border-radius: 3.05rem;
    background: #145294;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    font-size: 2.8rem;
    font-size: clamp(1.6rem, 1.2857142vw, 2.8rem);
    letter-spacing: 0.05em;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5.6rem;
    margin-top: 0;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    .client_voice {
        margin-bottom: 2rem;
        width: 100%;
        height: 4.3rem;
    }
}

.w555 {
    max-width: 55.5rem;
}

#contents {
    width: 100%;
    /* width: 1920px; */
    display: flex;
    position: relative;
    z-index: 0;
}

.cover-bg-video {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .cover-bg-video {
        display: none;
    }

    body {
        background: url(/event/jimtof/img/cover-bg.jpg) center / cover no-repeat fixed;
    }
}

.common-section-title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 5rem;
}

/* -------------------------------------------------- */
/* ORBs */
/* -------------------------------------------------- */

.common-section-title::before,
.common-section-title::after {
    content: "";
    position: absolute;
    width: 11rem;
    height: 10rem;
    border-radius: 50%;
    filter: blur(3.6rem);
    mix-blend-mode: screen;
    z-index: 0;
    top: 9.4rem;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.common-section-title::before {
    background: var(--color-blob-blue);
    left: 62%;
    animation: pulse-section-blob-blue 2s infinite alternate ease-in-out;
}

.common-section-title::after {
    background: var(--color-blob-pink);
    left: 38%;
    animation: pulse-section-blob-pink 3s infinite alternate-reverse ease-in-out;
}

@keyframes pulse-section-blob-blue {
    0% {
        opacity: 0.58;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@keyframes pulse-section-blob-pink {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.02);
    }
    100% {
        opacity: 0.98;
        transform: translate(-50%, -50%) scale(0.98);
    }
}

.common-section-title-en {
    position: relative;
    z-index: 1;
    font-family: "Kdam Thmor Pro";
    font-style: normal;
    font-weight: 400;
    font-size: 4.6rem;
    line-height: 6.8rem;
    text-align: center;
    color: #ffffff;
    padding-top: 6rem;
}

.common-section-title-jp {
    position: relative;
    z-index: 1;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-size: 1.6rem;
    /* line-height: 5.2rem; */
    text-align: center;
    letter-spacing: 0.25em;
    font-feature-settings: "kern" off;
    color: #f9f9f9;
}

.common-section-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0.7rem 4rem;
    border: 1px solid #ffffff;
    border-radius: 999px;
    background: transparent;
    text-decoration: none;
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.7rem;
    text-align: center;
    letter-spacing: 0.16em;
    color: #ffffff;
    transition: all 0.3s ease;
}

.common-section-btn:hover {
    /* transform: scale(1.05); */
    opacity: 0.6;
}

.common-section-btn-label {
    text-align: center;
}

.swiper-wrapper {
    height: auto !important;
}

/* -------------------------------------------------- */
/* ASIDE */
/* -------------------------------------------------- */

#aside {
    position: fixed;
    width: 78.5rem;
    order: 0;
    left: 0;
    padding-top: 7rem;
    /* padding-bottom: 18rem; */
    z-index: 3;
    /* background: url('/event/jimtof/img/aside-bg.png') no-repeat center center; */
}

.h1-title {
    position: relative;
    font-family: "Kdam Thmor Pro";
    font-style: normal;
    font-weight: 400;
    font-size: 7.7rem;
    line-height: 8.6rem;
    text-align: center;
    color: #ffffff;
    padding-bottom: 3rem;
    margin-bottom: 5.5rem;
    /* margin-top: 5rem; */
    margin-top: 10rem;
    border-bottom: 1px solid #ffffff;

    @media screen and (max-width: 767px) {
        margin-top: 0;
    }
}

.h1-title::before,
.h1-title::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    z-index: -1;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.h1-title::before {
    width: 15rem;
    height: 15rem;
    filter: blur(5rem);
    top: 0;
    left: 13rem;
    background: var(--color-blob-blue);
    animation: pulse-section-blob-blue 2s infinite alternate ease-in-out;
}

.h1-title::after {
    width: 15rem;
    height: 15rem;
    filter: blur(6rem);
    top: 0px;
    left: 2rem;
    background: var(--color-blob-pink);
    animation: pulse-section-blob-pink 3s infinite alternate-reverse ease-in-out;
}

.date-text {
    font-family: "Kdam Thmor Pro";
    font-style: normal;
    font-weight: 400;
    font-size: 6rem;
    line-height: 9.8rem;
    text-align: center;
    color: #ffffff;
    padding-bottom: 2.5rem;
}

.aside-img-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.aside-img-container::before,
.aside-img-container::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    z-index: -1;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.aside-img-container::before {
    width: 18rem;
    height: 16rem;
    filter: blur(5rem);
    top: 85%;
    left: 88%;
    background: var(--color-blob-blue);
    animation: pulse-section-blob-blue 2s infinite alternate ease-in-out;
}

.aside-img-container::after {
    width: 15rem;
    height: 15rem;
    filter: blur(6rem);
    top: 100%;
    left: 70%;
    background: var(--color-blob-pink);
    animation: pulse-section-blob-pink 3s infinite alternate-reverse ease-in-out;
}

.aside-img-container img {
    width: 95%;
    padding-left: 3%;
}

/* -------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------- */

.header-orbs {
    position: absolute;
    top: 0;
    right: 0;
    width: 30rem;
    height: 30rem;
    pointer-events: none;
    z-index: -1;
}

.header-orbs::before,
.header-orbs::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.header-orbs::before {
    width: 15rem;
    height: 15rem;
    filter: blur(5rem);
    top: 50%;
    right: 2%;
    background: var(--color-blob-blue);
    animation: pulse-section-blob-blue 2s infinite alternate ease-in-out;
}

.header-orbs::after {
    width: 15rem;
    height: 15rem;
    filter: blur(6rem);
    top: 60%;
    right: 35%;
    background: var(--color-blob-pink);
    animation: pulse-section-blob-pink 3s infinite alternate-reverse ease-in-out;
}

#header {
    position: fixed;
    width: 67.5rem;
    order: 2;
    right: 0;
    /* padding-left: 130px; */
    /* padding-top: 13rem; */
    padding-top: 20.5rem;
    /* padding-bottom: 18rem; */
}

@media screen and (max-width: 767px) {
    #header {
        display: none;
    }
}

#header ul {
    display: flex;
    flex-direction: column;
    gap: 4.6rem;
}

#header ul > li {
    list-style: none;
}

.nav-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-link:hover {
    transform: translateX(10px);
    opacity: 0.7;
}

.nav-eng {
    font-family: "Kdam Thmor Pro";
    font-style: normal;
    font-weight: 400;
    font-size: 3.6rem;
    line-height: 6.8rem;
    leading-trim: both;
    text-edge: cap;
    color: #ffffff;
}

.nav-jp {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-size: 1.4rem;
    /* line-height: 52px; */
    leading-trim: both;
    text-edge: cap;
    letter-spacing: 0.25em;
    font-feature-settings: "kern" off;
    color: #f9f9f9;
}

/* -------------------------------------------------- */
/* SP HEADER */
/* -------------------------------------------------- */

.fixed-header {
    display: none;
}

@media screen and (max-width: 767px) {
    .fixed-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: transparent;
    }

    .fixed-header__inner {
        display: flex;
        /* justify-content: flex-end; */
        position: absolute;
        right: 0;
        align-items: center;
        padding-right: 2rem;
        padding-top: 2rem;
        min-height: 5.2rem;
        box-sizing: border-box;
    }

    .fixed-header__toggle {
        position: relative;
        display: block;
        width: 3.5rem;
        height: 3rem;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        z-index: 99;
    }

    .fixed-header__bar {
        position: absolute;
        top: 50%;
        left: 0;
        height: 0.23rem;
        margin-top: -0.15rem;
        background: #ffffff;
        border-radius: 999px;
        transform-origin: center;
        transition:
            transform 0.32s ease,
            width 0.32s ease,
            left 0.32s ease,
            right 0.32s ease;
    }

    .fixed-header__bar--top {
        width: 100%;
        transform: translateY(-0.69rem);
    }

    .fixed-header__bar--bottom {
        width: 58%;
        left: auto;
        right: 0;
        transform: translateY(0.69rem);
        top: 1.2rem;
    }

    .fixed-header__toggle.is-open .fixed-header__bar--top,
    .fixed-header__toggle.is-open .fixed-header__bar--bottom {
        top: 50%;
        margin-top: -0.125rem;
        width: 100%;
        left: 0;
        right: auto;
        transform-origin: center;
    }

    .fixed-header__toggle.is-open .fixed-header__bar--top {
        transform: translateY(0) rotate(45deg);
    }

    .fixed-header__toggle.is-open .fixed-header__bar--bottom {
        transform: translateY(0) rotate(-45deg);
    }

    .fixed-header__sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .fixed-header__nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #000000;
        height: 100vh;
        /* max-height: calc(100vh - 5.2rem); */
        overflow-y: auto;
        padding: 2rem 2rem 3rem;
        padding-top: 7rem;
        box-sizing: border-box;
        transform-origin: top right;
        opacity: 0;
        transform: scale(0.92);
        pointer-events: none;
        visibility: hidden;
        transition:
            opacity 0.32s ease,
            transform 0.32s ease,
            visibility 0s linear 0.32s;
    }

    .fixed-header__nav.is-open {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        visibility: visible;
        transition:
            opacity 0.32s ease,
            transform 0.32s ease,
            visibility 0s linear 0s;
    }

    .fixed-header__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 5rem;
        align-items: center;
        text-align: center;
    }

    .fixed-header__list > li {
        list-style: none;
        margin: 0;
    }

    .fixed-header__link.nav-link {
        transform: none;
    }

    .fixed-header__link.nav-link:hover {
        opacity: 0.85;
    }

    .fixed-header__link .nav-eng {
        font-size: 2.6rem;
        line-height: 1.2;
    }

    .fixed-header__link .nav-jp {
        font-size: 1.2rem;
        margin-top: 0.4rem;
    }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .fixed-header__bar {
        transition-duration: 0.15s;
    }

    .fixed-header__nav,
    .fixed-header__nav.is-open {
        transform: none;
        transition:
            opacity 0.15s ease,
            visibility 0.15s ease;
    }
}

/* -------------------------------------------------- */
/* MAIN */
/* -------------------------------------------------- */

#main {
    position: relative;
    z-index: 4;
    width: 39rem;
    order: 1;
    margin: 0 auto;
    background-color: #000;
    flex-shrink: 0;
    box-sizing: border-box;

    @media screen and (max-width: 1024px) {
        width: 45rem;
    }
}

@media screen and (max-width: 767px) {
    #main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        /* padding-top: 5.2rem; */
        overflow-x: hidden;
    }
}

.header-logo {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 990;
    transition: all 0.3s ease;

    &:hover {
        opacity: 0.6;
    }
}

.header-logo img {
    display: block;
    width: 6rem;
    height: 6rem;
    max-width: calc(100vw - 2rem);
    position: fixed;
    top: 1rem;
    z-index: 990;
    pointer-events: auto;
}

@media screen and (min-width: 768px) {
    .header-logo img {
        left: calc(50vw - 39rem / 2 + 0.5rem);
    }
}

@media screen and (max-width: 1024px) {
    .header-logo img {
        left: calc(50vw - 44rem / 2 + 0.5rem);
    }
}

@media screen and (min-width: 768px) and (max-width: 1366px) {
    .header-logo img {
        max-width: min(22rem, calc(100vw - 2rem));
        max-height: 5.6rem;
        object-fit: contain;
    }
}

@media screen and (max-width: 767px) {
    .header-logo img {
        left: 1rem;
        max-width: min(20rem, calc(100vw - 2rem));
        max-height: 5.5rem;
        object-fit: contain;
    }
}

.fv-img {
    width: 100%;
    height: 71.5rem;
    position: relative;
    overflow: hidden;
    background-color: #000;

    @media screen and (max-width: 1024px) {
        height: 90rem;
    }

    @media screen and (max-width: 767px) {
        height: 100dvh;
    }
}

.fv-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
    min-width: 100%;
    max-width: none;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .fv-video {
        display: none;
    }

    .fv-img {
        background: url(/event/jimtof/img/fv-img.png) center / cover no-repeat;
    }
}

.fv-img-text {
    position: absolute;
    bottom: 6rem;
    left: 3.5rem;
    z-index: 1;

    & img {
        width: 100%;
        height: auto;
    }

    @media screen and (max-width: 767px) {
        bottom: 2rem;
        left: 2rem;
    }
}

@media screen and (max-width: 767px) {
    #aside {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    #aside {
        width: 52rem;
        left: 2rem;
        padding-top: 8rem;
        padding-bottom: 12rem;
    }

    #header {
        width: 62rem;
        right: 0;
        padding-top: 8rem;
        padding-bottom: 12rem;
    }

    #aside .h1-title {
        font-size: 5.6rem;
        line-height: 6.4rem;
        padding-bottom: 3rem;
        margin-bottom: 3rem;
    }

    #aside .date-text {
        font-size: 4.5rem;
        line-height: 7.2rem;
        padding-bottom: 2rem;
    }
}

/* -------------------------------------------------- */
/* SECTION 1 */
/* -------------------------------------------------- */

.section1 {
    padding: 8rem 2.5rem;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

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

.section1 > *:not(.sec1-bg-video) {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sec1-bg-video {
        display: none;
    }

    .section1 {
        background: url(/event/jimtof/img/sec1-bg.png) center / 100% 100% no-repeat;
    }
}

.sec1-title {
    font-family: "Kdam Thmor Pro";
    font-style: normal;
    font-weight: 400;
    font-size: 4.8rem;
    line-height: 6.5rem;
    text-align: center;
    color: #ffffff;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ffffff;
}

.sec1-date {
    font-family: "Kdam Thmor Pro";
    font-style: normal;
    font-weight: 400;
    font-size: 3.8rem;
    line-height: 6.8rem;
    text-align: center;
    color: #ffffff;
    padding-bottom: 2rem;
}

.sec1-logo {
    display: flex;
    justify-content: center;
    align-items: center;

    & img {
        width: 12rem;
        height: 12rem;
    }
}

.sec1-logo-text {
    font-family: "Kdam Thmor Pro";
    font-style: normal;
    font-weight: 400;
    font-size: 2.9rem;
    line-height: 6.8rem;
    text-align: center;
    color: #ffffff;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.sec1-banner-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* padding: 0 0.7rem; */
}

/* -------------------------------------------------- */
/* SECTION 2 */
/* -------------------------------------------------- */

.section2 {
    padding: 4rem 2.5rem 6rem;
    padding-top: 1rem;
}

.sec2-swiper {
    position: relative;
    z-index: 9;
    display: flex;
    align-items: center;
    /* gap: 1.5rem; */
}

.sec2-swiper-inner.swiper {
    position: relative;
    flex: 1;
    min-width: 0;
    width: auto;
    padding-bottom: 4.5rem;
    --swiper-pagination-bottom: 0;
}

.sec2-slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    max-width: 100%;
    margin: 0 auto;
}

.sec2-slide-img {
    position: relative;
    width: 100%;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.sec2-slide-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    transition: transform 0.45s ease;
}

.sec2-slide:hover .sec2-slide-img img {
    transform: scale(1.06);
}

.sec2-slide-title {
    margin: 0 0 1.2rem;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 500;
    font-size: 2.1rem;
    line-height: 3.4rem;
    text-align: justify;
    color: #ffffff;
}

.sec2-slide-desc {
    /* margin: 0 0 2rem; */
    margin: 0;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 2.5rem;
    text-align: justify;
    color: #ffffff;
}

.sec2-slide-meta {
    margin-bottom: 2.4rem;
}

.sec2-slide-meta-line {
    margin: 0 0 0.4rem;
    margin-top: 0.8rem;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 2.7rem;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #ffffff;
}

.sec2-slide-meta-line:last-child {
    /* margin-bottom: 0; */
    margin: 0;
}

.right-arrow-icon {
    position: absolute;
    right: 2rem;
    top: 53%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
}

.sec2-swiper .swiper-button-prev,
.sec2-swiper .swiper-button-next {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    flex-shrink: 0;
    width: 2rem;
    height: 4.4rem;
    margin-top: 0;
    transform: none;
    color: #b8b8b8;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    top: -9rem;
}

.sec2-swiper .swiper-button-prev {
    left: -1rem;
}

.sec2-swiper .swiper-button-next {
    right: -1rem;
}

.sec2-swiper .swiper-button-prev::after,
.sec2-swiper .swiper-button-next::after {
    font-size: 2.2rem;
    font-weight: 300;
}

.sec2-swiper .sec2-swiper-pagination.swiper-pagination-horizontal {
    left: 0;
    right: 0;
    width: 100%;
    z-index: 11;
}

.sec2-swiper .swiper-pagination-bullet {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 1rem !important;
    background: #4a4a4a;
    opacity: 1;
}

.sec2-swiper .swiper-pagination-bullet-active {
    background: linear-gradient(133.03deg, #636acc 14.83%, #50a7ee 64.03%);
}

/* -------------------------------------------------- */
/* SECTION 3 */
/* -------------------------------------------------- */

.section3 {
    padding: 4rem 2.5rem 6rem;
    padding-top: 1rem;
}

.sec3-tabs {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 3rem;
    margin-top: 2rem;
    margin-bottom: 2.4rem;
    padding-bottom: 0;
    width: 100%;
}

.sec3-tab {
    /* flex: 1; */
    width: 30%;
    margin: 0;
    padding: 0 0rem 2rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid #3a3a3a;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2.5rem;
    text-align: justify;
    letter-spacing: 0.08em;
    color: #6a6a6a;
    cursor: pointer;
    text-align: center;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        border-width 0.2s ease;
}

.sec3-tab:hover {
    color: #9a9a9a;
}

.sec3-tab.is-active {
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
    padding-bottom: calc(2rem - 2px);
}

.sec3-panel[hidden] {
    display: none !important;
}

.sec3-swiper {
    position: relative;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sec3-swiper-inner.swiper {
    position: relative;
    flex: 1;
    min-width: 0;
    width: auto;
    padding-bottom: 4.5rem;
    --swiper-pagination-bottom: 0;
}

.sec3-slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
}

.sec3-slide-img-wrap {
    width: 100%;
    margin-bottom: 2rem;
    overflow: hidden;
}

.sec3-slide-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    transition: transform 0.45s ease;
}

.sec3-slide:hover .sec3-slide-img {
    transform: scale(1.06);
}

.sec3-slide-lead {
    margin: 0 0 1rem;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.3rem;
    text-align: justify;
    color: #ffffff;
}

.sec3-slide-title-en {
    margin: 0 0 1.2rem;
    min-width: 0;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 500;
    font-size: 2.3rem;
    line-height: 2.8rem;
    text-align: justify;
    letter-spacing: 0.05em;
    color: #ffffff;
    overflow-wrap: break-word;
}

.sec3-slide-desc {
    margin: 0 0 2rem;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 2.7rem;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #ffffff;
}

.sec3-swiper .swiper-button-prev,
.sec3-swiper .swiper-button-next {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    flex-shrink: 0;
    width: 2rem;
    height: 4.4rem;
    margin-top: 0;
    transform: none;
    color: #b8b8b8;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    top: -5rem;
}

.sec3-swiper .swiper-button-prev {
    left: -1rem;
}

.sec3-swiper .swiper-button-next {
    right: -1rem;
}
.sec3-swiper .swiper-button-prev::after,
.sec3-swiper .swiper-button-next::after {
    font-size: 2.2rem;
    font-weight: 300;
}

.sec3-swiper .swiper-pagination.sec3-cat1-pagination,
.sec3-swiper .swiper-pagination.sec3-cat2-pagination,
.sec3-swiper .swiper-pagination.sec3-cat3-pagination {
    left: 0;
    right: 0;
    width: 100%;
    z-index: 11;
}

.sec3-swiper .swiper-pagination-bullet {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 1rem !important;
    background: #4a4a4a;
    opacity: 1;
}

.sec3-swiper .swiper-pagination-bullet-active {
    background: linear-gradient(133.03deg, #636acc 14.83%, #50a7ee 64.03%);
}

/* -------------------------------------------------- */
/* SECTION 4 */
/* -------------------------------------------------- */

.section4 {
    padding: 0 2.5rem 6rem;
    padding-top: 1rem;
    padding-bottom: 0;
}

.sec4-inner {
    margin-top: 2rem;
    padding: 3rem 2.5rem 4rem;
    background: #000000;
    border-radius: 0.4rem;
    padding: 0;
}

.sec4-tabs {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.6rem;
    margin-bottom: 2.4rem;
    padding-bottom: 0;
    width: 100%;
}

.sec4-tab {
    flex: 1;
    margin: 0;
    padding: 0 0.4rem 1.2rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid #3a3a3a;
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2.2rem;
    letter-spacing: 0.12em;
    color: #6a6a6a;
    cursor: pointer;
    text-align: center;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        border-width 0.2s ease;
}

.sec4-tab:hover {
    color: #9a9a9a;
}

.sec4-tab.is-active {
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
    padding-bottom: calc(1.2rem - 2px);
}

.sec4-swiper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    width: 100%;
}

.sec4-swiper-main {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sec4-swiper-inner.swiper {
    position: relative;
    flex: 1;
    min-width: 0;
    width: auto;
}

.sec4-swiper .swiper-slide {
    height: auto;
}

.sec4-swiper .swiper-button-prev,
.sec4-swiper .swiper-button-next {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    flex-shrink: 0;
    width: 2rem;
    height: 4.4rem;
    margin-top: 0;
    transform: none;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    cursor: pointer;
}

.sec4-swiper .swiper-button-prev::after,
.sec4-swiper .swiper-button-next::after {
    font-size: 2.2rem;
    font-weight: 300;
}

.sec4-swiper .swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100%;
    margin-top: 0;
    text-align: center;
    transform: none !important;
    z-index: 1;
}

.sec4-swiper .swiper-pagination-bullet {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 1rem !important;
    background: #4a4a4a;
    opacity: 1;
}

.sec4-swiper .swiper-pagination-bullet-active {
    background: linear-gradient(133.03deg, #636acc 14.83%, #50a7ee 64.03%);
}

/* Collaborationセクション一時非表示 */
.sec4-swiper {
display: none !important;
}

.sec4-panel[hidden] {
    display: none !important;
}

.sec4-grid {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 0.8rem;
    width: 100%;
    padding: 0 0.5rem;
    /* min-height: 56rem; */

    &:first-child {
        padding-left: 0;
    }
}

.sec4-grid-top,
.sec4-grid-bottom {
    display: grid;
    gap: 0.8rem;
    min-height: 0;
}

.sec4-grid-top {
    flex: 0 0 auto;
    grid-template-columns: 1fr 1fr;
    /* span-tl = 202px (20.2rem): row1 74px + gap + row2; tr-mid aligns with span-tl */
    grid-template-rows: 7.4rem 12rem;
    align-content: start;
    height: fit-content;
}

.sec4-grid-top .sec4-card--span-tl {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.sec4-grid-top .sec4-card--tr-short {
    grid-column: 2;
    grid-row: 1;
}

.sec4-grid-top .sec4-card--tr-mid {
    grid-column: 2;
    grid-row: 2;
}

.sec4-grid-bottom {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    /* bl-short 74px, bl-mid 117px; span-br spans both rows → 74 + gap + 117 = 199px (19.9rem) */
    grid-template-rows: 7.4rem 11.7rem;
    align-content: start;
    height: fit-content;
}

.sec4-grid-bottom .sec4-card--bl-short {
    grid-column: 1;
    grid-row: 1;
}

.sec4-grid-bottom .sec4-card--bl-mid {
    grid-column: 1;
    grid-row: 2;
}

.sec4-grid-bottom .sec4-card--span-br {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.sec4-card {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-height: 0;
    min-width: 0;
    background: #d9d9d9;
    border: none;
    border-radius: 0.2rem;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.3s ease;
}

.sec4-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
    will-change: transform;
}

.sec4-card:hover .sec4-card-img {
    transform: scale(1.06);
}

.sec4-card-toggle {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(180deg, #7a8b9a 0%, #4f5d6b 100%);
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.25);
}

.sec4-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.sec4-card:hover .sec4-card-toggle {
    background: linear-gradient(180deg, #6a7b8a 0%, #3f4d5b 100%);
}

.sec4-card-toggle:active {
    transform: scale(0.96);
}

/* -------------------------------------------------- */
/* SECTION 4 ? IMAGE LIGHTBOX */
/* -------------------------------------------------- */

.sec4-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    background: rgba(30, 30, 30, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
}

.sec4-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0s;
}

.sec4-lightbox-inner {
    position: relative;
    width: 102.4rem;
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    background: #ffffff;
    border-radius: 0.6rem;
    box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.25);
    padding: 5rem 5.5rem 5rem 5rem;
    transform: scale(0.96);
    transition: transform 0.3s ease;
    cursor: default;
    overflow: hidden;
}

.sec4-lightbox.is-open .sec4-lightbox-inner {
    transform: scale(1);
}

.sec4-lightbox-content {
    display: flex;
    align-items: stretch;
    gap: 5rem;
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 18rem);
}

.sec4-lightbox-img-wrap {
    flex: 0 0 47rem;
    width: 47rem;
    height: 37rem;
    overflow: hidden;
    border-radius: 0.4rem;
    background: #f3f3f3;
}

.sec4-lightbox-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sec4-lightbox-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0.5rem;
    color: #1a1a1a;
    overflow-y: auto;
}

.sec4-lightbox-title {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 2.4rem;
    letter-spacing: 0.02em;
}

.sec4-lightbox-desc {
    font-size: 1.4rem;
    line-height: 2;
    margin: 0;
    letter-spacing: 0.02em;
    color: #1f1f1f;
    white-space: pre-line;
}

.sec4-lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2.4rem;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #1a1a1a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition:
        opacity 0.2s ease,
        transform 0.15s ease;
}

.sec4-lightbox-close svg {
    width: 2.4rem;
    height: 2.4rem;
    display: block;
}

.sec4-lightbox-close:hover {
    opacity: 0.65;
}

.sec4-lightbox-close:active {
    transform: scale(0.92);
}

body.sec4-lightbox-lock {
    overflow: hidden;
}

@media (max-width: 767px) {
    .sec4-lightbox {
        padding: 2rem;
    }

    .sec4-lightbox-inner {
        width: 100%;
        max-height: calc(100vh - 4rem);
        padding: 4.5rem 2rem 3rem;
        overflow-y: auto;
    }

    .sec4-lightbox-content {
        flex-direction: column;
        gap: 2rem;
        max-height: none;
    }

    .sec4-lightbox-img-wrap {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .sec4-lightbox-text {
        overflow: visible;
        padding-top: 0;
    }

    .sec4-lightbox-title {
        font-size: 1.7rem;
        margin-bottom: 1.6rem;
    }

    .sec4-lightbox-desc {
        font-size: 1.3rem;
        line-height: 1.85;
    }

    .sec4-lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 3rem;
        height: 3rem;
    }

    .sec4-lightbox-close svg {
        width: 2rem;
        height: 2rem;
    }
}

/* -------------------------------------------------- */
/* SECTION 5 */
/* -------------------------------------------------- */

.section5 {
    padding: 4rem 2.5rem 12rem;
    padding-top: 1rem;

    @media screen and (max-width: 767px) {
        /* padding-bottom: 6rem; */
    }
}

.sec5-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #000000;
    padding: 0 3rem;
}

.sec5-card-img-wrap {
    width: 100%;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.sec5-card-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.45s ease;
}

/* .sec5-card:hover .sec5-card-img {
    transform: scale(1.06);
} */

.sec5-card-body {
    margin: 0 0 1.2rem;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 2.3rem;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #ffffff;
}

.sec5-card-period {
    margin: 0 0 2.8rem;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 2.7rem;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #ffffff;
}

/* -------------------------------------------------- */
/* EXHIBITION */
/* -------------------------------------------------- */

#exhibition-details {
    position: relative;
    padding-top: 8.5rem;
    padding-bottom: 5rem;
    /* background: #fff; */
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: url(/event/jimtof/img/exhibition-bg.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        pointer-events: none;
    }
}

#exhibition-details > * {
    position: relative;
    z-index: 1;
}

.exhibition-title-en-big {
    font-family: "Kdam Thmor Pro";
    font-style: normal;
    font-weight: 400;
    font-size: 8.5rem;
    line-height: 12.1rem;
    text-align: center;
    color: #ffffff;
    opacity: 0.15;
}

.exhibition-title {
    position: relative;
    margin-top: -12rem;
}

.exhibition-img-container {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 2rem;
    margin-bottom: 4rem;
}

.exhibition-img-container img {
    width: 100%;
}

.exhibition-event-swiper {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
}

.exhibition-event-swiper-inner.swiper {
    position: relative;
    flex: 1;
    min-width: 0;
    width: auto;
    padding-bottom: 2.5rem;
    --swiper-pagination-bottom: 0;
}

.exhibition-event-slide {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0.5rem 2rem;
    border-radius: 0.4rem;
}

.exhibition-event-slide-img {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-bottom: 2rem;
    overflow: hidden;
}

.exhibition-event-slide-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    transition: transform 0.45s ease;
}

.exhibition-event-slide:hover .exhibition-event-slide-img img {
    transform: scale(1.06);
}

.exhibition-event-slide-title {
    margin: 0 0 1.2rem;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 500;
    font-size: 2.1rem;
    line-height: 3.4rem;
    text-align: justify;
    color: #ffffff;
}

.exhibition-event-slide-desc {
    margin: 0 0 1.6rem;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 2.5rem;
    text-align: justify;
    color: #ffffff;
}

.exhibition-event-slide-period {
    box-sizing: border-box;
    margin: 0 0 3rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: #ffffff;
    width: 100%;
}

.exhibition-event-btn {
    position: relative;
    width: 100%;
    max-width: 29.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1rem 0.3rem 1rem 1rem;
    gap: 1rem;
    background: #ffffff;
    border-radius: 3.1rem;
    text-decoration: none;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.7rem;
    text-align: center;
    letter-spacing: 0.16em;
    color: #520047;
    /* color: #1a2d6b; */
    transition: opacity 0.3s ease;
}

.exhibition-event-btn:hover {
    opacity: 0.85;
}

.exhibition-event-btn .right-arrow-icon {
    filter: brightness(0);
    opacity: 0.75;
}

.exhibition-event-btn-label {
    text-align: center;
}

.exhibition-event-swiper .swiper-button-prev,
.exhibition-event-swiper .swiper-button-next {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    flex-shrink: 0;
    width: 2rem;
    height: 4.4rem;
    margin-top: 0;
    transform: none;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    top: -7.5rem;
}

/* .exhibition-event-swiper .swiper-button-prev {
    left: -1rem;
}

.exhibition-event-swiper .swiper-button-next {
    right: -1rem;
} */

.exhibition-event-swiper .swiper-button-prev::after,
.exhibition-event-swiper .swiper-button-next::after {
    font-size: 2.2rem;
    font-weight: 300;
}

.exhibition-event-swiper .exhibition-event-pagination.swiper-pagination-horizontal {
    left: 0;
    right: 0;
    width: 100%;
    z-index: 11;
}

.exhibition-event-swiper .swiper-pagination-bullet {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 1rem !important;
    background: #ffffff;
    opacity: 1;
}

.exhibition-event-swiper .swiper-pagination-bullet-active {
    background: linear-gradient(133.03deg, #636acc 14.83%, #50a7ee 64.03%);
}

/* -------------------------------------------------- */
/* INQUIRY */
/* -------------------------------------------------- */

#inquiry {
    width: 100%;
    /* padding-top: 3.75rem; */
    padding-bottom: 3.75rem;
    /* background-color: #f2f2f2; */
}

/* アンカー直ジャンプ時は IO より先に表示（長大ブロックで threshold を満たさない問題の保険） */
#inquiry:target {
    opacity: 1 !important;
    transform: none !important;
}

#inquiry .inquiry_hd {
    font-size: 1.125rem;
    font-size: clamp(0.875rem, 1.2857142vw, 1.125rem);
    line-height: 2rem;
    margin-bottom: 1.8125rem;
}

#inquiry .container_inquiry {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#inquiry .client_voice {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 100%;
    height: 4.3rem;
}

#inquiry .inquiry_infos {
    font-weight: 500;
    font-size: 1.125rem;
    font-size: clamp(0.875rem, 1.2857142vw, 1.125rem);
    letter-spacing: 0.05em;
    text-align: left;
    color: #000;
    margin-bottom: 1.25rem;
}

#inquiry .phone_banner {
    border: 0.125rem solid #0052a4;
    width: 100%;
    padding: 2rem 1.25rem 1.625rem;
    box-sizing: border-box;
}

#inquiry .phone_bannner_hd {
    font-family: var(--Noto);
    font-weight: bold;
    font-size: 1.125rem;
    font-size: clamp(0.875rem, 1.2857142vw, 1.125rem);
    letter-spacing: 0.05em;
    line-height: 2.0625rem;
    text-align: center;
    color: #0052a4;
    margin-bottom: 0.25rem;
}

#inquiry .phone_bannner_description {
    font-family: var(--Noto);
    font-weight: normal;
    font-size: 1rem;
    letter-spacing: 0.05em;
    line-height: 2.0625rem;
    text-align: center;
    color: #000;
    margin-bottom: 0.5rem;
}

#inquiry .phone_contents_flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#inquiry .phone_link {
    display: flex;
    font-family: var(--Roboto);
    font-weight: bold;
    font-size: 1.875rem;
    text-align: right;
    color: #000;
    margin-right: 0;
    pointer-events: all;
    transition: all 0.3s ease-in;
}

#inquiry .phone_link:hover {
    opacity: 0.75;
}

#inquiry .phone_link img {
    margin-right: 0.625rem;
    max-width: 2.1875rem;
}

#inquiry .office_hours {
    font-family: var(--Noto);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    line-height: 1.625rem;
    text-align: left;
    color: #000;
}

#inquiry .form_container {
    /* margin-top: 2.625rem; */
    background: #fff;
    width: 100%;
    border: 0.125rem solid #0052a4;
    padding: 1.875rem 1.25rem 2.5rem;
    box-sizing: border-box;
}

#inquiry .form_container_hd {
    font-family: var(--Noto);
    font-weight: bold;
    font-size: 1.125rem;
    font-size: clamp(0.875rem, 1.2857142vw, 1.125rem);
    letter-spacing: 0.05em;
    line-height: 2.0625rem;
    text-align: center;
    color: #0052a4;
    margin-bottom: 0.875rem;
}

#inquiry .the_form {
    overflow: hidden;
}

#inquiry .the_form img,
#inquiry .the_form {
    width: 100%;
    vertical-align: middle;
}

#inquiry form.mktoForm {
    font-size: 1.3rem !important;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

#inquiry form.mktoForm .mktoLabel,
#inquiry .mktoForm .mktoLabel {
    width: 100% !important;
    max-width: 100%;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    float: none;
    box-sizing: border-box;
    font-size: 1.3rem !important;
    line-height: 1.5;
    display: flex;
}

#inquiry form.mktoForm #LblFirstName,
#inquiry form.mktoForm #LblkanaFirstName {
    padding-left: 0 !important;
}

#inquiry form.mktoForm #LblemailClubMember,
#inquiry form.mktoForm #LblprivacyPolicy,
#inquiry form.mktoForm #LblprivacyPolicy02 {
    width: 100% !important;
    max-width: 100%;
}

#inquiry form.mktoForm input[type="radio"],
#inquiry form.mktoForm input[type="checkbox"] {
    padding: 0 !important;
}

#inquiry form.mktoForm input[type="text"],
#inquiry form.mktoForm input[type="url"],
#inquiry form.mktoForm input[type="email"],
#inquiry form.mktoForm input[type="tel"],
#inquiry form.mktoForm input[type="number"],
#inquiry form.mktoForm input[type="date"],
#inquiry form.mktoForm textarea {
    font-size: 1.3rem !important;
    margin: 0 !important;
    width: 100% !important;
}

#inquiry form.mktoForm select,
#inquiry form.mktoForm textarea {
    font-size: 1.3rem !important;
}

#inquiry form.mktoForm input:not([type="checkbox"]):not([type="radio"]) {
    font-size: 1.3rem !important;
}

#inquiry .mktoForm .mktoFormRow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 98% !important;
    max-width: 100%;
    min-width: 0;
    float: none;
    clear: both;
    box-sizing: border-box;
    margin: 0 auto;
}

#inquiry .mktoForm .mktoFormCol,
#inquiry .mktoForm .mktoFieldDescriptor {
    width: 100% !important;
    max-width: 100%;
    float: none;
    box-sizing: border-box;
}

#inquiry .mktoForm .mktoOffset {
    display: none;
}

#inquiry .mktoForm .mktoFieldWrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    float: none;
    box-sizing: border-box;
}

#inquiry .mktoForm .mktoGutter {
    display: none;
    width: 0 !important;
    min-width: 0;
    flex-shrink: 0;
}

#inquiry .mktoForm input.mktoField,
#inquiry .mktoForm select.mktoField,
#inquiry .mktoForm textarea.mktoField {
    /* width: 100% !important; */
    max-width: 100%;
    box-sizing: border-box;
}

#inquiry .mktoForm input[type="url"],
#inquiry .mktoForm input[type="text"],
#inquiry .mktoForm input[type="date"],
#inquiry .mktoForm input[type="tel"],
#inquiry .mktoForm input[type="email"],
#inquiry .mktoForm input[type="number"],
#inquiry .mktoForm textarea.mktoField,
#inquiry .mktoForm select.mktoField {
    height: auto !important;
}

#inquiry .mktoForm .mktoLogicalField,
#inquiry .mktoForm .mktoCheckboxList,
#inquiry .mktoForm .mktoRadioList {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* チェック：input と label が兄弟のとき 2 列グリッドで横位置を固定（WebKit ずれ対策） */
#inquiry .mktoForm .mktoCheckboxList:has(> input[type="checkbox"]) {
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 0.65rem;
    align-items: start;
}

#inquiry .mktoForm .mktoCheckboxList:has(> input[type="checkbox"]) > input[type="checkbox"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
    margin: 0 !important;
    align-self: start;
    flex-shrink: 0;
    box-sizing: border-box;
    vertical-align: top;
}

#inquiry .mktoForm .mktoCheckboxList:has(> input[type="checkbox"]) > label,
#inquiry .mktoForm .mktoCheckboxList:has(> input[type="checkbox"]) > input[type="checkbox"] + label {
    line-height: 30px !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
}

/* チェック：label が親のとき */
#inquiry .mktoForm .mktoCheckboxList:has(> label input[type="checkbox"]) {
    display: flex !important;
    flex-direction: column;
    gap: 0.65rem;
}

#inquiry .mktoForm .mktoCheckboxList:has(> label input[type="checkbox"]) > label {
    display: flex !important;
    align-items: flex-start;
    gap: 0.65rem;
    line-height: 1.5 !important;
    margin: 0 !important;
}

#inquiry .mktoForm .mktoCheckboxList:has(> label input[type="checkbox"]) > label input[type="checkbox"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
    margin: 0 !important;
    flex-shrink: 0;
    box-sizing: border-box;
}

#inquiry .mktoForm .mktoRadioList:has(> input[type="radio"]) {
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 0.65rem;
    align-items: start;
}

#inquiry .mktoForm .mktoRadioList:has(> input[type="radio"]) > input[type="radio"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
    margin: 0 !important;
    margin-top: 0.5rem !important;
    align-self: start;
    flex-shrink: 0;
    box-sizing: border-box;
    vertical-align: top;
}

#inquiry .mktoForm .mktoRadioList:has(> input[type="radio"]) > input + label {
    line-height: 30px !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
}

#inquiry .mktoForm .mktoRadioList > input + label {
    white-space: normal !important;
}

#inquiry .mktoForm .mktoRadioList:has(> label input[type="radio"]) {
    display: flex !important;
    flex-direction: column;
    gap: 0.65rem;
}

#inquiry .mktoForm .mktoRadioList:has(> label input[type="radio"]) > label {
    display: flex !important;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#inquiry .mktoForm .mktoRadioList:has(> label input[type="radio"]) > label input[type="radio"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
    margin: 0 !important;
    flex-shrink: 0;
    box-sizing: border-box;
}

#inquiry .mktoForm .mktoHtmlText.mktoHasWidth,
#inquiry .mktoForm .mktoHtmlText {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

#inquiry .mktoForm .mktoButtonRow {
    width: 100% !important;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
}

#inquiry .mktoForm .mktoButtonRow .mktoButtonWrap {
    margin-left: 0 !important;
    margin-right: auto;
    display: inline-block;
    width: 100%;
    text-align: center;
}

#inquiry .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton {
    width: 100%;
    max-width: 22rem;
    box-sizing: border-box;
}

/* iPad：rem 基準のぶれを抑えつつ、Safari の入力ズーム・縦位置の違和感を減らす */
@media screen and (min-width: 768px) and (max-width: 1366px) {
    #inquiry form.mktoForm {
        font-size: 14px !important;
    }

    #inquiry form.mktoForm .mktoLabel,
    #inquiry .mktoForm .mktoLabel {
        font-size: 14px !important;
    }

    #inquiry form.mktoForm input[type="text"],
    #inquiry form.mktoForm input[type="url"],
    #inquiry form.mktoForm input[type="email"],
    #inquiry form.mktoForm input[type="tel"],
    #inquiry form.mktoForm input[type="number"],
    #inquiry form.mktoForm input[type="date"],
    #inquiry form.mktoForm textarea,
    #inquiry form.mktoForm input:not([type="checkbox"]):not([type="radio"]),
    #inquiry form.mktoForm select,
    #inquiry form.mktoForm textarea {
        font-size: 14px !important;
    }

    #inquiry .mktoForm input.mktoField:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]),
    #inquiry .mktoForm select.mktoField {
        line-height: 1.5 !important;
        padding: 12px !important;
        min-height: 44px;
        box-sizing: border-box !important;
        border-radius: 4px;
        vertical-align: middle;
    }

    #inquiry .mktoForm textarea.mktoField {
        line-height: 1.5 !important;
        padding: 12px 14px !important;
        min-height: 6.5rem;
        box-sizing: border-box !important;
        border-radius: 4px;
        vertical-align: top;
    }

    #inquiry .mktoForm input.mktoField::placeholder,
    #inquiry .mktoForm textarea.mktoField::placeholder {
        font-size: 14px !important;
        line-height: 1.5 !important;
        font-weight: 400;
        opacity: 1;
    }

    #inquiry .mktoForm input.mktoField::-webkit-input-placeholder,
    #inquiry .mktoForm textarea.mktoField::-webkit-input-placeholder {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    #inquiry .mktoForm input.mktoField::-moz-placeholder,
    #inquiry .mktoForm textarea.mktoField::-moz-placeholder {
        font-size: 14px !important;
        line-height: 1.5 !important;
        opacity: 1;
    }

    #inquiry .mktoForm .mktoCheckboxList > input,
    #inquiry .mktoForm .mktoRadioList > input {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px;
        min-height: 30px;
    }

    #inquiry .mktoForm .mktoRadioList:has(> label input[type="radio"]) > label input[type="radio"],
    #inquiry .mktoForm .mktoCheckboxList:has(> label input[type="checkbox"]) > label input[type="checkbox"] {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px;
        min-height: 30px;
    }

    #inquiry .mktoForm .mktoRadioList > input + label,
    #inquiry .mktoForm .mktoCheckboxList input[type="checkbox"] + label {
        line-height: 30px !important;
    }
}

#inquiry .mktoForm .mktoClear {
    display: none;
}

/* -------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------- */

#footer {
    /* padding-bottom: 0.625rem; */
    padding-bottom: 3rem;
    /* background: #f2f2f2; */
    color: #fff;

    & a {
        text-decoration: none;
        cursor: pointer;
        color: #fff;
        display: inline-block;
        margin: 0;
        padding: 0;
    }
}

#footer .footer-contents-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#footer .corp_link_flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
}

#footer .corp_link_flex a {
    font-size: 1.4rem;
    line-height: 1.6;
    transition: all 0.3s ease-in;

    @media screen and (max-width: 767px) {
        font-size: 1.2rem;
    }
}

#footer .corp_link_flex a:hover {
    opacity: 0.75;
}

#footer .corp_link_flex a:first-child {
    padding-right: 0.625rem;
    border-right: 0.0625rem solid #646262;
    margin-right: 0.625rem;
}

#footer .copyright_contents {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.625rem;
    width: 100%;
}

#footer .osg_icon {
    max-width: 2.625rem;
    margin-right: 0.625rem;
}

#footer .links_and_copyright {
    font-size: 1.4rem;
    line-height: 1.6;
    text-align: center;
    width: 100%;

    @media screen and (max-width: 767px) {
        font-size: 1.2rem;
    }
}

#footer .sns_links {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

#footer .sns_links a {
    max-width: 3.5rem;
    margin-left: 1rem;
    transition: all 0.3s ease-in;

    & img {
        width: 100%;
    }
}

#footer .sns_links a:hover {
    opacity: 0.75;
}

@media screen and (max-width: 47.9375rem) {
    #footer {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------- */
/* ANIMATION */
/* --------------------------------------------------------------- */

@media print {
    @page {
        size: landscape;
        margin: 5mm;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html {
        font-size: 62.5% !important;
    }

    body {
        margin: 0;
        background: #000 !important;
        zoom: 0.58;
    }

    #contents {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 185rem !important;
        min-width: 185rem !important;
        max-width: none !important;
        background-image: url(/event/jimtof/img/cover-bg.jpg) !important;
        background-position: center top !important;
        background-repeat: repeat-y !important;
        background-size: 100% auto !important;
        background-attachment: scroll !important;
        box-sizing: border-box !important;
    }

    #aside {
        display: block !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 78.5rem !important;
        max-width: none !important;
        flex: 0 0 78.5rem !important;
        order: 0 !important;
        padding-top: 12rem !important;
        padding-bottom: 18rem !important;
        page-break-inside: avoid;
    }

    #main {
        position: relative !important;
        width: 39rem !important;
        max-width: none !important;
        flex: 0 0 39rem !important;
        order: 1 !important;
        margin: 0 !important;
        overflow: visible !important;
        page-break-inside: auto;
    }

    #header {
        display: block !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 67.5rem !important;
        max-width: none !important;
        flex: 0 0 67.5rem !important;
        order: 2 !important;
        padding-top: 20.8rem !important;
        page-break-inside: avoid;
    }

    #fixed-header {
        display: none !important;
    }

    .header-logo {
        display: block !important;
        position: absolute !important;
        left: 78.5rem !important;
        top: 0 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        z-index: 5 !important;
    }

    .header-logo img {
        position: relative !important;
        left: 1rem !important;
        top: 1rem !important;
        max-width: 20rem !important;
        height: auto !important;
    }

    #exhibition-details::before {
        background-image: url(/event/jimtof/img/exhibition-bg.png) !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-size: 100% auto !important;
        background-attachment: scroll !important;
    }

    .swiper-button-prev,
    .swiper-button-next,
    .swiper-pagination {
        display: none !important;
    }

    .swiper {
        overflow: hidden !important;
    }

    .swiper-wrapper {
        transform: none !important;
    }

    .swiper-slide:not(.swiper-slide-active) {
        display: none !important;
    }

    .swiper-slide.swiper-slide-active {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        opacity: 1 !important;
    }

    .fade-up,
    .fade-up.fade-up-slide,
    .fade-up.show,
    .fade-up.fade-up-slide.show,
    .zoom-in,
    .zoom-in.show,
    .reveal-blur,
    .reveal-blur.show,
    .reveal-scale,
    .reveal-scale.show,
    .stagger-fade,
    .stagger-fade.show,
    .stagger-fade .stagger-fade-item,
    .slide-target,
    .slide-target.slide-down,
    .slide-target-before,
    .slide-target-before::before,
    .slide-target-before.slide-down::before {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .zoom-in,
    .reveal-blur,
    .reveal-scale {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .fade-up.show,
    .fade-up.fade-up-slide.show,
    .zoom-in.show,
    .reveal-blur.show,
    .reveal-scale.show {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }

    .stagger-fade .stagger-fade-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media screen {
    .fade-up {
        opacity: 0;
        transform: translateY(30px);
        transition:
            opacity 0.8s ease-out,
            transform 0.8s ease-out;
    }

    .zoom-in {
        opacity: 0;
        transform: scale(0.85);
        transition:
            opacity 0.8s ease-out,
            transform 0.8s ease-out;
    }
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
    /* animation: fadeUpFix 0.8s ease-out; */
}

.zoom-in {
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}

.zoom-in.show {
    opacity: 1;
    transform: scale(1);
}

.fade-up.fade-up-slide {
    transition: none;
}

.fade-up.fade-up-slide.show {
    animation: fadeUpThenSlide 1.35s ease-out forwards;
}

@keyframes fadeUpThenSlide {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }
    52% {
        opacity: 1;
        transform: translateY(0) translateX(-18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

/* @keyframes fadeUpFix {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
} */

.slide-target {
    transform: translateY(-100px);
    opacity: 0;
    transition:
        transform 0.8s ease-out,
        opacity 0.8s ease-out;
}

.slide-down {
    transform: translateY(0);
    opacity: 1;
}