@charset "utf-8";

/* ==============================
tokens
============================== */

:root {
    --green: #5C995C;
    --green_shade: #408040;
    --beige: #F5F2EB;
    --beige_shade: #E0D4BC;
    --brown: #664D33;
    --brown_muted: #99826B;
    --brown_shade: #4D361F;
    --white: #fff;
}

/* ==============================
base
============================== */

html {
    font-size: 62.5%;
}

body {
    position: relative;
    font-family: ten-mincho-text, serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.12em;
    font-feature-settings: "palt" 1;
    color: var(--brown);
    background-color: var(--beige);
    overflow-x: hidden;
}

h2 {
    font-family: garamond-premier-pro, serif;
    font-size: 1.96em;
    font-weight: 500;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.05em;
}

h3 {
    font-size: 1.4em;
    line-height: 1;
    letter-spacing: 0.1em;
}

img {
    display: block;
    inline-size: 100%;
}

/* ==============================
utilities
============================== */

.u-mt-2 { margin-block-start: 0.2rem; }
.u-mt-4 { margin-block-start: 0.4rem; }
.u-mt-8 { margin-block-start: 0.8rem; }
.u-mt-12 { margin-block-start: 1.2rem; }
.u-mt-16 { margin-block-start: 1.6rem; }

.u-text-white { color: var(--white); }
.u-text-small { font-size: clamp(11px, -18.091px + 9.091vw, 16px); }

.u-pcBr {
    display: none;
}

@media (min-width: 768px) {
    .u-pcBr {
        display: block;
    }
}

@media (min-width: 1024px) {
    .u-spBr {
        display: none;
    }
}

/* ==============================
components
============================== */

/* topic */
.topic {
    text-align: center;
}

.topic p {
    margin-block-start: 1.2rem;
    font-size: 0.83em;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--brown_muted);
}

.topic__white,
.topic__white p {
    color: var(--white);
}

.note {
    font-size: 0.833em;
    line-height: 1.667em;
    letter-spacing: 0.1em;
    color: var(--brown_muted);
}

/* button */
.button {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding-inline-start: 2.4rem;
    padding-inline-end: 1.6rem;
    block-size: 4.4rem;
    color: var(--white);
    background-color: var(--green);
    border-radius: 0.4rem;
    transition: 0.4s;
}

.button:hover {
    background-color: var(--green_shade);
}

.button-wrapper {
    text-align: center;
}

.button--brown {
    background-color: var(--brown);
}

.button--brown:hover {
    background-color: var(--brown_shade);
}

/* ==============================
layout
============================== */

.l-outer {
    padding-inline: 2.4rem;
}

.l-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 6.4rem;
    row-gap: clamp(64px, 54.857px + 2.857vw, 96px);
    /* max-inline-size: 1360px; */
    margin-inline: auto;
    padding-block: 8rem;
    padding-block: clamp(80px, 45.714px + 10.714vw, 200px);
}

/* ============================================================
Js
============================================================ */

/* ==============================
bg-pic
============================== */

/* .bg-pic {
    position: fixed;
    inline-size: 100%;
    block-size: 120dvh;
    background-image: url(assets/images/bg-pic1.webp);
    background-size: cover;
    background-position: top center;
    z-index: -1000;
    will-change: transform;
} */

/* ==============================
fade-in
============================== */

/* .fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
} */

/* ==============================
header
============================== */

.header {
    position: sticky;
    top: 0;
    z-index: 10000;
}

.header.l-outer {
    padding-inline: 1.2rem;
}

.header .l-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-inline: 0;
    padding-block: 1.2rem;
}

/* ==============================
FV footer
============================== */

.FV.l-outer {
    inline-size: 100dvw;
    block-size: 100dvh;
    margin-block-start: -6.8rem;
    padding: 0;
    text-align: center;
    color: var(--white);
    background-image: url(assets/images/fv.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
}

.footer.l-outer {
    margin-block-start: 20rem;
}

.FV .l-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    block-size: 100%;
    max-inline-size: none;
    padding-block-start: 14.4rem;
    padding-block-end: 10.4rem;
}

.footer .l-inner {
    justify-content: space-around;
}

.FV__deco {
    font-family: garamond-premier-pro, serif;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

.FV__info {
    display: flex;
    flex-direction: column;
    row-gap: 3.2rem;
    margin-block-start: 6.4rem;
    font-size: 2.0rem;
    font-size: clamp(20px, 18.857px + 0.357vw, 24px);
    line-height: 1;
    letter-spacing: 0.1em;
    transform: scaleY(0.9);
}

.FV__title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    inline-size: 100dvw;
    font-size: 4.0rem;
    font-size: clamp(40px, 24.000px + 5vw, 96px);
    line-height: 1;
    transform: scaleY(0.9);
}

.FV__subtitle {
    display: block;
    margin-block-start: 2.4rem;
    margin-block-start: clamp(24px, 21.714px + 0.714vw, 32px);
    font-size: 2.4rem;
    font-size: clamp(24px, 21.714px + 0.714vw, 32px);
    line-height: 1;
    letter-spacing: 0.1em;
}

small {
    position: absolute;
    transform: translateX(-50%);
    inset-block-end: 2.0rem;
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--white);
}

/* ==============================
concept
============================== */

.concept {
    position: relative;
}

.concept.l-outer {
    max-inline-size: 1440px;
    margin-inline: auto;
}

.concept .l-inner {
    align-items: flex-start;
    padding-block: 24rem;
    max-inline-size: 42.6rem;
}

.concept .topic {
    text-align: left;
}

.concept h2 {
    line-height: 1.5em;
}

.concept__desc {
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
}

.cencept__deco {
    font-size: 1rem;
    line-height: 1.667;
    letter-spacing: 0;
    color: var(--brown_muted);
}

.concept__img {
    position: absolute;
    aspect-ratio: 4 / 3;
    z-index: -10000;
    border-radius: 0.4rem;
}

.concept__img--1 {
    inset-block-start: 4.8rem;
    inset-block-start: clamp(48px, 34.286px + 4.286vw, 96px);
    inset-inline-end: 0;
    inline-size: 20rem;
    inline-size: clamp(200px, 142.857px + 17.857vw, 400px);
}

.concept__img--2 {
    inset-block-end: 5.6rem;
    inset-block-end: clamp(56px, -42.286px + 30.714vw, 400px);
    inset-inline-start: 0;
    inline-size: 16rem;
    inline-size: clamp(160px, 120.000px + 12.5vw, 300px);
}

.concept__img--3 {
    inset-block-end: 0;
    inset-inline-end: 4rem;
    inset-inline-end: clamp(40px, -51.429px + 28.571vw, 360px);
    inline-size: 9.6rem;
    inline-size: clamp(96px, 66.286px + 9.286vw, 200px);
}

/* ==============================
features
============================== */

.features.l-outer {
    max-inline-size: 1440px;
    margin-inline: auto;
}

.features__lead {
    max-inline-size: 42.6rem;
    margin-inline: 0;
}

.features__list {
    display: flex;
    flex-direction: column;
    row-gap: 6.4rem;
    max-inline-size: 400px;
    margin-inline: auto;
}

.features__item {
    display: flex;
    flex-direction: column;
    row-gap: 2.4rem;
}

.features__image {
    border-radius: 0.4rem;
}

.features__content {
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
}

.features__desc {
    display: flex;
    flex-direction: column;
    row-gap: 0.8rem;
}

.features__number {
    color: var(--brown_muted);
}

@media (min-width: 1024px) {
    .features__list {
        row-gap: 9.6rem;
        max-inline-size: 1126px;
    }
    .features__item {
        flex-direction: row;
        align-items: flex-end;
        column-gap: 6.4rem;
    }
    .features__item:nth-of-type(even) {
        flex-direction: row-reverse;
    }
    .features__image {
        flex: 0 0 calc(531 / 1126 * 100%);
        max-inline-size: 53.1rem;
    }
}

/* ==============================
ticket
============================== */

.ticket.l-outer {
    padding: 0;
}

.ticket__bg-wrapper {
    position: sticky;
    top: 0;
    block-size: 100dvh;
    overflow: visible;
}

.ticket__bg-padding {
    block-size: 100vh;
    padding: 0.8rem;
}

.ticket__bg {
    block-size: 100%;
    background-image: url(assets/images/ticket-bg.webp);
    background-size: cover;
    /* background-attachment: fixed; */
    border-radius: 0.8rem;
}

.ticket .l-inner {
    position: relative;
    margin-block-start: -72rem;
    padding-block: 20rem;
    padding-block-end: clamp(200px, 142.857px + 17.857vw, 400px);
    padding-inline: 3.2rem;
    z-index: 1000;
}

.ticket__list {
    display: flex;
    flex-direction: column;
    row-gap: 4rem;
    max-inline-size: 660px;
    margin-inline: auto;
}

.ticket__item {
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
    padding-inline: 2.4rem;
    padding-block: 3.2rem;
    background-color: var(--beige);
    border-radius: 0.4rem;
}

.ticket__price {
    text-align: right;
}

.ticket__price span {
    margin-inline-start: 0.8rem;
}

/* ==============================
info-faqs
============================== */

.info-faqs.l-outer {
    max-inline-size: 2000px;
    margin-inline: auto;
    margin-block-start: 24rem;
    padding-inline: 1.2rem;
}

.info-faqs__img {
    inline-size: 100dvw;
    margin-block-start: 24rem;
    transform: translateX(-1.2rem);
}

@media (min-width: 1024px) {
    .info-faqs {
        display: flex;
        flex-direction: row;
    }
    .info-faqs.l-outer {
        padding: 0;
    }
    .info-faqs__img-wrapper {
        position: sticky;
        top: 0;
        inline-size: 50%;
        block-size: 100dvh;
    }
    .info-faqs__img-padding {
        block-size: 100%;
        padding: 0.8rem;
    }
    .info-faqs__img {
        inline-size: 100%;
        block-size: 100%;
        margin-block-start: 0;
        transform: none;
        border-radius: 0.8rem;
        object-fit: cover
    }
    .info-faqs__content-wrapper {
        inline-size: 50%;
    }
}

/* ==============================
info
============================== */

.table {
    max-inline-size: 64rem;
    margin-inline: auto;
}

tr {
    display: block;
    padding-inline: 1.2rem;
    padding-block: 1.6rem;
    border-block-end: var(--beige_shade) solid 1px;
}

tr:first-of-type {
    border-block-start: var(--beige_shade) solid 1px;
}

th {
    inline-size: clamp(6.4rem, 1.9143rem + 14.018vw, 22.1rem);
    font-weight: inherit;
}

.info__map {
    display: table-row;
    padding: 0;
}

.info__map iframe {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
}

.info a {
    text-decoration: underline;
}

/* ==============================
faqs
============================== */

.faqs.l-inner {
    padding-block-start: 0;
}

.faqs__list {
    max-inline-size: 64rem;
}

.faqs__item {
    padding-inline: 1.2rem;
    padding-block: 1.6rem;
    border-block-end: var(--beige_shade) solid 1px;
}

.faqs__item:first-of-type {
    border-block-start: var(--beige_shade) solid 1px;
}

.faqs__text {
    display: flex;
    flex-direction: row;
}

.faqs__text span {
    display: block;
    inline-size: 2.4rem;
    flex: 0 0 2.4rem;
}

.faqs__item p {
    flex: 1;
}