/* COMMON */
:root {
    --inner: 1760px;
}

[data-animate] { will-change: transform; }

.cursor { z-index: 20; position: fixed; top: -20px; left: 20px; pointer-events: none; }
.cursor__wrap { opacity: 0; visibility: hidden; transition: all .35s ease; }
.cursor__text {display: inline-flex; align-items: center; padding: 0 16px; height: 30px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--clr-primary); background: #fff; border-radius: 40px; opacity: 0; transition: all .15s ease; }
.cursor[data-cursor-state="on"] .cursor__text { opacity: 1; }
.cursor--init .cursor__wrap { opacity: 1; visibility: visible; }
@media screen and (max-width: 1024px) {
    .cursor { display: none; }
}
@media screen and (max-width: 768px) {

}


/* Modal */
.check-modal .modal__wrapper { max-width: 750px; }
.check-view { padding: 60px; text-align: center; }
.check-view .button { width: 180px; font-family: var(--font-secondary); font-weight: 400; }
.check-view__logo { width: 200px;}
.check-view__heading { margin: 48px 0; font-family: var(--font-secondary); font-size: 3.6rem; font-weight: 600; }
.check-view__buttons { display: flex; align-items: center; justify-content: center; gap: 12px; }
.check-view__small { display: flex; justify-content: center; gap: 0.5em; margin-top: 48px; text-align: left; font-size: 1.6rem; color: #555555; }
.check-view__small span:first-child { flex-shrink: 0; }
@media screen and (max-width: 1024px) {
    .check-view { padding: 42px; }
    .check-view__logo { width: 160px; }
    .check-view__heading { font-size: 2.4rem; margin: 30px 0; }
    .check-view__buttons { gap: 10px; }
    .check-view .button { width: 160px; }
    .check-view__small { font-size: 1.4rem; margin-top: 30px; }
}
@media screen and (max-width: 768px) {
    .check-view { padding: 32px 24px; }
    .check-view__logo { width: 120px; }
    .check-view__heading { font-size: 2rem; margin: 20px 0; }
    .check-view__buttons { gap: 6px; }
    .check-view .button { width: 120px; height: 46px; }
    .check-view__small { font-size: 1.3rem; margin-top: 20px; }
}
@media screen and (max-width: 480px) {
    .check-view__small br { display: none; }
}

/* main */
.hero-slide { overflow: hidden; position: relative; height: 100vh; height: 100dvh; }
.hero-slide__wrap { position: relative; height: 100%; }
.hero-slide__item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; backface-visibility: hidden; }
.hero-slide__item--active { opacity: 1; visibility: visible; }
.hero-slide__block { display: block; height: 100%; }
.hero-slide__background { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.hero-navigation { position: absolute; display: flex; gap: 12px; right: 60px; bottom: 60px; opacity: 0; }
.hero-navigation__item { overflow: hidden; position: relative; padding: 1px; width: 110px; background: transparent; border-radius: 8px; transition: all .35s ease; aspect-ratio: 1.5277; }
.hero-navigation__item::after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: 1px; background: rgba(0, 0, 0, 0.5); opacity: 0; transform: scaleX(0); transform-origin: left; }
.hero-navigation__thumbnail { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; opacity: 0.8; user-select: none; }
.hero-navigation__item--active { background: #fff; }
.hero-navigation__item--active .hero-navigation__thumbnail { opacity: 1; }
.hero-navigation__item--active::after { opacity: 1; transform: scaleX(var(--progress)); }

.slogan .sentence { -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(90deg, #DAA93E 0%, #DAA93E 50%, rgb(218 169 62 / 20%) 70%, rgb(218 169 62 / 20%) 100%); background-size: 400% 100%; background-position: 100% 0%; }
.slogan__wrap { position: relative; padding: 160px 120px; min-height: 100vh; min-height: 100dvh; height: 100%; }
.slogan__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(180deg, var(--clr-primary) 0%, #110405 60%, var(--clr-primary) 100%); background-size: 100% 200%; background-position: 0% 0%; border-radius: inherit; }
.slogan__heading { position: relative; line-height: 1.4; font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 5.8rem); font-weight: 400; }
/* .slogan__heading-line:nth-child(2) { margin-bottom: 0.2em; } */
.slogan__heading .line:last-child { margin-top: 0.65em; }
.slogan__paragraph { display: flex; justify-content: flex-end; position: relative; margin-top: 196px; font-size: clamp(1.46rem, 4.26vw, 2.4rem); }
.slogan__paragraph-line { display: block; margin-bottom: 20px; }
.slogan__paragraph-line:last-child { margin-bottom: 0; }
/* .slogan__heading-line:nth-child(1),
.slogan__heading-line:nth-child(2) { font-family: var(--font-secondary); line-height: 1.26; font-size: 0.918em; font-weight: 500; letter-spacing: -0.045em; }
.slogan__heading-line:nth-child(2) { margin-bottom: 0.2em; } */

.story { height: 100vh; height: 100dvh; }
.story__wrap { position: relative; width: 100%; height: 100%; }
.story__media { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.story__media-item { display: block; width: 100%; height: 100%; object-fit: cover }
.story__media-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 45%, hsla(0, 0%, 0%, 0.005) 49%, hsla(0, 0%, 0%, 0.02) 54%, hsla(0, 0%, 0%, 0.08) 61%, hsla(0, 0%, 0%, 0.18) 69%, hsla(0, 0%, 0%, 0.32) 78%, hsla(0, 0%, 0%, 0.5) 87%, hsla(0, 0%, 0%, 0.72) 95%, hsla(0, 0%, 0%, 0.9) 101%, hsl(0, 0%, 0%) 105%); pointer-events: none; }
.story__main { display: flex; flex-direction: column; justify-content: flex-end; position: relative; top: 0; left: 0; margin: 0 auto; padding: 0 80px 120px; width: 100%; height: 100%; }
.story__heading { font-size: 3.6rem; font-weight: 600; }
.story__text { margin: 20px 0 48px; font-size: 2rem; }

.feature { position: relative; height: 100vh; height: 500dvh; pointer-events: none; }
.feature__edge { width: 100%; height: 50vh; height: 50dvh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.75) 80%, rgba(0, 0, 0, 1) 100%); }
.feature__wrap { overflow: hidden; position: sticky; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background: #000; pointer-events: auto; }
.feature__heading { z-index: 2; position: absolute; top: 12%; left: 0; width: 100%; line-height: 1.26; text-align: center; font-family: var(--font-display); font-size: clamp(4.2rem, 7.2vw, 12rem); font-weight: 400; mix-blend-mode: exclusion; }
.feature__heading-line { overflow: hidden; }
.feature__heading-line:nth-child(1) { font-size: 0.56em; }
.feature__heading-sentence { position: relative; will-change: transform; }
.feature-slide { overflow: hidden; position: relative; top: 28%; left: 50%; height: calc(620 / 1920 * 100vw); transform: translate(-50%, 0%); aspect-ratio: 0.8051; will-change: transform; }
.feature-slide__wrap { position: relative; height: 100%; }
.feature-slide__item { position: relative; height: 100%; }
.feature-slide__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: var(--gap); }
.feature-slide__background-wrap { overflow: hidden; height: 100%; }
.feature-slide__background-item { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0.8; will-change: transform; backface-visibility: hidden; transform: translateZ(0); filter: saturate(1.1); }
.feature-slide__contents { display: none; padding: 0 var(--gap) var(--gap); }
.feature-slide__title { display: flex; font-size: 2rem; }
.feature-slide__title-order { padding-right: 0.45em; font-size: 1.4rem; }
.feature-slide__text { margin-top: 6px; }
.feature-indicator { display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all .35s ease; }
.feature-indicator__item { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--gap) + 120px) 0 calc(var(--gap) + 50px); width: 100%; }
.feature-indicator__title { overflow: hidden; height: 1.5em; font-size: 3.6rem; font-weight: 700; }
.feature-indicator__title-line { display: flex; }
.feature-indicator__title-order { padding-right: 0.35em; font-size: 2rem; font-weight: 700; }
.feature-indicator__text { overflow: hidden; height: 3em; font-size: 2rem; }
.feature-slide--init .feature-indicator { opacity: 1; visibility: visible; }

.artisan { position: relative; padding: 200px 0; text-align: center; background: #000; }
.artisan .premium-yebisu-master { width: clamp(180px, 30vw + 5rem, 517px); }
.artisan .premium-yebisu-master::before { background-color: #fff; }
.artisan .button { white-space: nowrap; }
.artisan__wrap { z-index: 2; position: relative; margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; }
.artisan__heading { position: relative; width: 100%; line-height: 1.2; text-align: center; font-family: var(--font-display); font-size: 9.4rem; font-weight: 400; }
.artisan__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.artisan__background-item { display: block; width: 100%; height: 100%; object-fit: cover; }
.artisan__text { margin: 140px 0 40px; font-size: 2.4rem; font-weight: 500; }

.discover { position: relative; margin: var(--gap); height: 720px; }
.discover__wrap { height: 100%; }
.discover__background { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.discover__background-item { display: block; width: 100%; height: 100%; opacity: 0.94; object-fit: cover; }
.discover__background-media { display: block; position: relative; top: 0%; left: 50%; width: 145%; height: 100%; object-fit: cover; transform: translateX(-50%); }
.discover__background-image { position: absolute; bottom: -5%; right: 7.1%; width: clamp(170px, 34vw, 768px); transform: scale(1.3); }
.discover__contents { z-index: 2; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 80px; height: 100%; }
.discover__heading { margin-bottom: 48px; line-height: 1.5; font-size: 3.6rem; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {

}
@media (max-width: 1956px) {
    .story__contents { width: 90%; }
}
@media screen and (min-width: 769px) {
    .hero-slide__background--mobile { display: none; }
}
@media screen and (max-width: 1024px) {
    .hero-navigation { right: 40px; bottom: 40px; }
    .hero-navigation__item { width: 100px; border-radius: 6px; }

    .slogan__wrap { padding: 120px 5%; min-height: auto; }
    .slogan__paragraph { display: block; margin-top: 60px; }

    .story { width: 100%; height: auto; display: grid; aspect-ratio: 16 / 9; min-height: 500px; }
    .story__main { padding: 0 5% 80px; }
    .story__heading { font-size: 2.4rem; }
    .story__text { font-size: 1.8rem; margin: 10px 0 30px; }

    .feature { padding: 120px 0; height: auto; background: #000; }
    .feature__edge { display: none; }
    .feature__heading { position: static; }
    .feature__wrap { height: auto; }
    .feature-slide { position: static; height: auto; transform: none; aspect-ratio: auto; }
    .feature-slide__wrap { height: auto; }
    .feature-slide__item { height: auto; }
    .feature-slide__background { position: static; }
    .feature-slide__background-wrap { height: auto; }
    .feature-slide__contents { display: block; }

    .artisan { padding: 120px 0; }
    .artisan__heading { margin-bottom: 24px; font-size: 6.4rem; }
    .artisan__text { font-size: 1.8rem; }

    .discover { height: 540px; }
    .discover__contents { padding: 0 36px; }
    .discover__heading { margin-bottom: 32px; font-size: 3rem; }
    .discover__background-image { bottom: -4%; }
}
@media screen and (max-width: 768px) {
    .hero-slide { padding: calc(var(--header-height) + 5px) 20px 20px; height: auto; }
    .hero-slide__wrap { overflow: hidden; height: auto; aspect-ratio: 0.68359375; }
    .hero-slide__background--desktop { display: none; }
    .hero-slide__item { height: auto; }
    .hero-slide__block { height: auto; }
    .hero-navigation { right: auto; left: 50%; bottom: 40px; padding: 10px; transform: translateX(-50%); background: rgb(0 0 0 / 20%); border-radius: 24px; }
    .hero-navigation__item { width: 10px; height: 10px; border-radius: 50%; aspect-ratio: auto; background: rgb(255 255 255 / 30%); }
    .hero-navigation__item::after { content: none; }
    .hero-navigation__item--active { background: rgb(255 255 255 / 100%); }
    .hero-navigation__thumbnail { display: none; }

    .slogan__wrap { padding: 60px 5% 80px; }
    .slogan__paragraph { margin-top: 40px; }

    .story__main { padding-bottom: 60px; }
    .story__heading { font-size: 2rem; }
    .story__text { font-size: 1.6rem; }

    .feature { padding: 80px 0; }

    .artisan { padding: 80px 0; }
    .artisan__heading { margin-bottom: 16px; font-size: 4.2rem; }
    .artisan .button { position: static; margin-top: 24px; transform: none; }
    .artisan__text { font-size: 1.6rem; margin-top: 30px; }

    .discover { height: 420px; }
    .discover__contents { padding: 0 24px 80px; }
    .discover__heading { font-size: 2rem; margin-bottom: 20px; }
    .discover__background-image { bottom: -2.3%; }
}