/* =========================================================
   Tokens / Base
========================================================= */
body {
    --color-text: #000;
    --color-text-alt: #3e4843;
    --color-heading-main: #000;
    --color-heading-main-alt: #fff;
    --color-heading-sub: #374b41;
    --color-menu: #fff;
    --color-bg: #000;
    --color-bg-menu: black;
    --color-link: #000;
    --color-link-alt: #3e4843;
    --color-link-hover: #e4007f;
    --color-link-alt-hover: #fff;
    --color-button-menu: #f3f3f3;
    --color-button-menu-hover: rgba(255, 255, 255, .7);
    --color-button-close: #fff;
    --color-button-close-hover: #79a18a;
    --button-width: 80px;
    --button-height: 80px;
}

body .loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

body.loading .loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.loader__spinner {
    position: relative;
    width: 70px;
    height: 70px;
}

.loader__orbit {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 66px;
    height: 66px;
    opacity: 0;
    transform: rotate(225deg);
    animation: loaderOrbit 4.4s infinite;
}

.loader__ball {
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
}

.loader__orbit--1 {
    animation-delay: 0.96s;
}

.loader__orbit--2 {
    animation-delay: 0.19s;
}

.loader__orbit--3 {
    animation-delay: 0.38s;
}

.loader__orbit--4 {
    animation-delay: 0.58s;
}

.loader__orbit--5 {
    animation-delay: 0.77s;
}

@keyframes loaderOrbit {
    0% {
        opacity: 1;
        z-index: 99;
        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        transform: rotate(300deg);
        animation-timing-function: linear;
    }

    30% {
        opacity: 1;
        transform: rotate(410deg);
        animation-timing-function: ease-in-out;
    }

    39% {
        opacity: 1;
        transform: rotate(645deg);
        animation-timing-function: linear;
    }

    70% {
        opacity: 1;
        transform: rotate(770deg);
        animation-timing-function: ease-out;
    }

    75% {
        opacity: 1;
        transform: rotate(900deg);
        animation-timing-function: ease-out;
    }

    76% {
        opacity: 0;
        transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        transform: rotate(900deg);
    }
}

/* Header wrapper */
.contentsLogo-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    transform: translateY(0);
    transition: transform .6s ease;
    will-change: transform;
    -webkit-transform: translateY(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    mix-blend-mode: difference;
}

.contentsLogo-wrap.is-hide {
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
}

.contentsLogo {
    position: fixed;
    top: 18px;
    left: 20px;
    width: 20%;
    max-width: 220px;
    min-width: 200px;
}

.contentsLogo a {
    display: block;
    position: relative;
}

.contentsLogo a img {
    width: 100%;
}


@-webkit-keyframes active-btn19-bar02 {
    100% {
        height: 0;
    }
}

@keyframes active-btn19-bar02 {
    100% {
        height: 0;
    }
}

@-webkit-keyframes active-btn19 {
    0% {
        border-color: transparent;
        -webkit-transform: rotate(0);
    }

    25% {
        border-color: transparent rgba(255, 255, 255, .5) transparent transparent;
    }

    50% {
        border-color: transparent rgba(255, 255, 255, .5) rgba(255, 255, 255, .5) transparent;
    }

    75% {
        border-color: transparent rgba(255, 255, 255, .5) rgba(255, 255, 255, .5) rgba(255, 255, 255, .5);
    }

    100% {
        border-color: rgba(255, 255, 255, .5);
        -webkit-transform: rotate(-680deg);
    }
}

@keyframes active-btn19 {
    0% {
        border-color: transparent;
        transform: rotate(0);
    }

    25% {
        border-color: transparent #f3f3f3 transparent transparent;
    }

    50% {
        border-color: transparent #f3f3f3 #f3f3f3 transparent;
    }

    75% {
        border-color: transparent #f3f3f3 #f3f3f3 #f3f3f3;
    }

    100% {
        border-color: #f3f3f3;
        transform: rotate(-680deg);
    }
}


body.is-opera-menu-open .operaMenuBtn::before {
    animation: active-btn19 .72s ease .08s forwards;
}



body.is-opera-menu-fixed {
    overflow: hidden;
    touch-action: none;

}

/* =========================
	header
========================= */
.operaHeader {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    display: flex;
    align-items: center;
}

/* =========================
	menu button
========================= */
.operaMenuBtn {
    width: var(--button-width);
    height: var(--button-height);
    position: relative;
    z-index: 1002;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease;
    overflow: visible;
    border: 2px solid #333;
}

.operaMenuBtn__ring {
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

.operaMenuBtn:hover .operaMenuBtn__ring {
    animation: hover-btn19 .45s ease forwards;
}

@keyframes hover-btn19 {

    0% {
        transform: scale(.95);
        border-color: rgba(255, 255, 255, 0);
        opacity: 0;
    }

    35% {
        border-color: rgba(255, 255, 255, 1);
        opacity: 1;
    }

    70% {
        border-color: rgba(255, 255, 255, .4);
        opacity: .6;
    }

    100% {
        transform: scale(1.25);
        border-color: rgba(255, 255, 255, 0);
        opacity: 0;
    }

}

body.is-opera-menu-open .operaMenuBtn:hover .operaMenuBtn__ring {
    animation: none;
}

.operaMenuBtn span {
    position: absolute;
    left: 50%;
    width: 50%;
    height: 2px;
    background: #eee;
    border-radius: 1px;
    transform: translateX(-50%);
    transform-origin: center;
}

.operaMenuBtn:hover span:nth-child(1) {
    top: 30px;
}

.operaMenuBtn:hover span:nth-child(2) {
    top: 30px;
}

.operaMenuBtn:hover span:nth-child(3) {
    top: 36px;
}

.operaMenuBtn.is-lock {
    pointer-events: auto;
    cursor: pointer;
}

.operaMenuBtn small {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 13px;
    display: grid;
    place-items: center;
}

.operaMenuBtn small::before,
.operaMenuBtn small::after {
    content: "";
    grid-area: 1 / 1;
    /* font-family: var(--FunctionPro); */
    font-family: "Cormorant Garamond", sans-serif;
    font-size: 1.25em;
    font-style: italic;

}

.operaMenuBtn small::before {
    content: "OPEN";
    color: #fff;
    transition-delay: 0.3s;
    transition-duration: 0.6s;
    transition-timing-function: ease;
    opacity: 1;
    filter: blur(0px);

}

.operaMenuBtn small::after {
    content: "CLOSE";
    color: #fff;
    transition-delay: 0.3s;
    transition-duration: 0.6s;
    transition-timing-function: ease;
    opacity: 0;
    filter: blur(2px);
}

.is-opera-menu-open .operaMenuBtn small::after {
    opacity: 1;
    filter: blur(0px);

}

.is-opera-menu-open .operaMenuBtn small::before {
    opacity: 0;
    filter: blur(2px);

}

.operaMenuBtn::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

/* menu open時だけ再生 */
body.is-opera-menu-open .operaMenuBtn::before {
    opacity: 1;
    animation: active-btn19 .7s ease forwards;
}

/* 閉じる時：is-opera-menu-open を外した直後にJSで付与 */
.operaMenuBtn.is-close-ring::before {
    opacity: 1;
    animation: close-btn19 .55s ease forwards;
}

/* ボーダー透明にする */
.operaMenuBtn.is-close-ring {
    border: 2px solid transparent;
}

/* 閉じる用アニメーション例 */
@keyframes close-btn19 {
    0% {
        border-color: rgba(255, 255, 255, .85);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        border-color: rgba(255, 255, 255, 0);
        transform: scale(1.35);
        opacity: 0;
    }
}

/* =========================
	overlay
========================= */

.operaOverlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: #030303;
    /* background-image: url(/img/menu/menu_bg2.webp);
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat; */
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    clip-path: inset(100% 0% 0% 0%);
    will-change: clip-path;
}

.operaOverlay__inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
    z-index: 10;
    background: transparent;
}

.operaOverlay__inner::-webkit-scrollbar {
    display: none;
}


.operaOverlayMenu::-webkit-scrollbar {
    display: none;
}

/* =========================
	overlay menu
========================= */
.operaOverlayMenu {
    max-height: calc(100svh - 190px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding-right: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    mix-blend-mode: screen;
    overflow-y: auto;





    right: 0;
    width: 45vw;
    transform: translateY(-50%);
    align-items: flex-start;
    background-color: transparent;

}

.operaOverlayMenu a {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    overflow: hidden;
    color: #e9e6e1;
    text-decoration: none;
    font-size: clamp(44px, 5.1vw, 86px);
    font-weight: 800;
    letter-spacing: .01em;
}


.operaOverlayMenu a .en,
.operaOverlayMenu a .ja {
    display: block;
    white-space: nowrap;

}

.operaOverlayMenu a .ja {
    font-size: 20%;
    font-weight: 500;
    letter-spacing: .16em;
    padding-left: 1em;
    color: #f6e2b0;
}

.operaOverlayMenu a .en span {
    font-family: "Cormorant Garamond", sans-serif;
    font-style: italic;
    background: linear-gradient(45deg, #8e6c37, #f6e2b0, #ffe9b7, #a47a3e);
    background-clip: border-box;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


.operaOverlayMenu a.place .en span {
    background: linear-gradient(90deg, #bfc0c0, #fff 25% 0, #fbfbfb, #fff 75% 0, #bfc0c0);
    background-clip: border-box;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.operaOverlayMenu a.place .ja {
    color: #fbfbfb;

}


.operaOverlayMenu a .en {
    position: relative;
    display: inline-block;
    overflow: hidden;

}

.operaOverlayMenu a .en span {
    display: block;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.operaOverlayMenu a .en span:last-child {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
}

.operaOverlayMenu a:hover .en span:first-child {
    transform: translateY(-100%);
}

.operaOverlayMenu a:hover .en span:last-child {
    transform: translateY(-100%);
}


/* =========================
	bottom info
========================= */
.operaOverlay__tel {
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    width: 45vmax;
    transform: translateY(-50%);
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 40px;
}

.operaOverlayLogo {
    display: flex;

    width: clamp(180px, 30vw, 380px);
    gap: 10px;
}

.operaOverlay__tel img {
    width: 100%;
}

.operaOverlayInfo {
    width: clamp(180px, 30vw, 380px);
    color: rgba(255, 255, 255, .45);
}

.operaOverlay__bottom {
    position: absolute;
    right: 2vw;
    bottom: 2vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    justify-content: flex-end;
    margin-top: 20px;
    width: 90%;
    max-width: 480px;
    gap: 8px;

    /* opacity: 0;
    transform: translateY(20px);
	margin-top:auto;
	width:100%; */
}

.operaOverlay__bottom li {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.operaOverlay__bottom li a {
    display: block;
    background-color: #000;
    width: 100%;
    height: 100%;
    line-height: 48px;
}

.operaOverlay__bottom li a img {
    height: 24px;
}


/* =========================
	SP
========================= */
@media screen and (max-width: 768px) {

    .operaHeader {
        top: 10px;
        right: 10px;
    }

    .operaLogo {
        font-size: 30px;
    }

    .operaHeaderNav,
    .operaHeaderTel {
        display: none;
    }

    .operaMenuBtn {
        width: 72px;
        height: 72px;
    }

    .operaMenuBtn span {
        width: 42%;
    }

    .operaOverlay__inner {
        padding: 110px 6vw 40px;
    }

    .operaOverlayMenu {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        margin-bottom: 32px;
        right: auto;
        width: 88vw;
        gap: 18px;
    }



    .operaOverlay__tel {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        margin-bottom: 32px;

        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .operaOverlayMenu a {
        font-size: clamp(42px, 13vw, 72px);
    }

    .operaOverlayMenu a .ja {
        font-size: 12px;
        margin-top: 7px;
    }

    .operaOverlay__bottom {
        right: 6vw;
        bottom: 34px;
        display: block;
    }

    .operaOverlayInfo {
        margin-top: 12px;
    }

}






.visual__left {
    height: 86vh;
    left: 0;
}

.visual__left img {
    height: 100%;
}






@media screen and (min-width: 768px) and (max-width: 1366px) {
    .smokeBg {
        display: none;
    }
}

.smokeBg {
    position: absolute;
    inset: 0;
    z-index: ;
    overflow: hidden;
    pointer-events: none;
    /* background:
        radial-gradient(circle at 50% 55%, rgba(183, 33, 126, .10), transparent 34%),
        radial-gradient(circle at 50% 70%, rgba(120, 20, 90, .08), transparent 42%),
        linear-gradient(180deg, #060508 0%, #130814 48%, #040305 100%); */
    background-image: url(/img/menu/menu_bg2.webp);
    background-position: 0 50%;
    background-size: cover;
    background-repeat: no-repeat;

}

.smokeBg .smokeBg__shadow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    background: rgba(0, 0, 0, 0.72);
    /* background:
    radial-gradient(circle at 50% 55%, rgba(183, 33, 126, .10), transparent 34%),
    radial-gradient(circle at 50% 70%, rgba(120, 20, 90, .08), transparent 42%),
    linear-gradient(180deg, #060508 0%, #130814 48%, #040305 100%); */
}

.smokeBg__layer,
.smokeBg__pulse {
    position: absolute;
    inset: -16%;
    background-image: url("/img/menu/menu_bg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    mix-blend-mode: screen;
    transform-origin: 50% 50%;
    will-change: transform, opacity, filter;
    z-index: 10;
}


/* メイン煙：少し薄く、でも動きは増やす */
.smokeBg__layer--1 {
    opacity: .26;
    filter: blur(1px);
    animation:
        smokeFloat1 18s ease-in-out infinite alternate,
        smokeBreath1 8s ease-in-out infinite;
}

/* 中間煙 */
.smokeBg__layer--2 {
    opacity: .16;
    filter: blur(2px);
    transform: scale(1.18) rotate(180deg);
    animation:
        smokeFloat2 24s ease-in-out infinite alternate,
        smokeBreath2 10s ease-in-out infinite;
}

/* 奥の煙 */
.smokeBg__layer--3 {
    opacity: .10;
    filter: blur(8px);
    transform: scale(1.34);
    animation:
        smokeFloat3 32s ease-in-out infinite alternate,
        smokeBreath3 13s ease-in-out infinite;
}

/* ぼあーんは弱める */
.smokeBg__pulse {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 72vw;
    height: 40vw;
    min-width: 900px;
    min-height: 480px;
    max-width: 1500px;
    max-height: 820px;
    transform: translate(-50%, -50%);
    background-size: 120% auto;
    background-position: center;
    filter: blur(16px);
    opacity: 0;
}

.smokeBg__pulse--1 {
    animation: smokePulse1 7s ease-in-out infinite;
}

.smokeBg__pulse--2 {
    animation: smokePulse2 10s ease-in-out infinite;
}

/* 動きを少し大きく */
@keyframes smokeFloat1 {
    0% {
        transform: scale(1.04) translate3d(-5%, 3%, 0) rotate(-2deg);
    }

    25% {
        transform: scale(1.09) translate3d(2%, -2%, 0) rotate(1deg);
    }

    50% {
        transform: scale(1.13) translate3d(5%, -4%, 0) rotate(2deg);
    }

    75% {
        transform: scale(1.10) translate3d(-1%, 1%, 0) rotate(-1deg);
    }

    100% {
        transform: scale(1.18) translate3d(6%, -5%, 0) rotate(3deg);
    }
}

@keyframes smokeFloat2 {
    0% {
        transform: scale(1.16) rotate(180deg) translate3d(5%, -2%, 0);
    }

    30% {
        transform: scale(1.22) rotate(184deg) translate3d(-2%, 3%, 0);
    }

    60% {
        transform: scale(1.28) rotate(188deg) translate3d(-6%, 5%, 0);
    }

    100% {
        transform: scale(1.34) rotate(192deg) translate3d(4%, -4%, 0);
    }
}

@keyframes smokeFloat3 {
    0% {
        transform: scale(1.30) translate3d(0, 5%, 0) rotate(0deg);
    }

    35% {
        transform: scale(1.38) translate3d(-3%, -2%, 0) rotate(-1deg);
    }

    70% {
        transform: scale(1.46) translate3d(4%, -5%, 0) rotate(1deg);
    }

    100% {
        transform: scale(1.56) translate3d(-2%, 4%, 0) rotate(2deg);
    }
}

/* 呼吸感も少し弱め */
@keyframes smokeBreath1 {

    0%,
    100% {
        opacity: .22;
        filter: blur(1px) brightness(1);
    }

    50% {
        opacity: .30;
        filter: blur(2px) brightness(1.08);
    }
}

@keyframes smokeBreath2 {

    0%,
    100% {
        opacity: .12;
        filter: blur(2px) brightness(1);
    }

    50% {
        opacity: .20;
        filter: blur(3px) brightness(1.12);
    }
}

@keyframes smokeBreath3 {

    0%,
    100% {
        opacity: .07;
        filter: blur(8px) brightness(1);
    }

    50% {
        opacity: .13;
        filter: blur(10px) brightness(1.10);
    }
}

/* pulse はかなり控えめ */
@keyframes smokePulse1 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.88);
        filter: blur(20px) brightness(1);
    }

    20% {
        opacity: .05;
    }

    48% {
        opacity: .11;
        transform: translate(-50%, -50%) scale(1.02);
        filter: blur(14px) brightness(1.10);
    }

    76% {
        opacity: .06;
        transform: translate(-50%, -50%) scale(1.14);
        filter: blur(22px) brightness(1.02);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.24);
        filter: blur(28px) brightness(.96);
    }
}

@keyframes smokePulse2 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.94) rotate(180deg);
        filter: blur(24px) brightness(1);
    }

    22% {
        opacity: .04;
    }

    50% {
        opacity: .08;
        transform: translate(-50%, -50%) scale(1.08) rotate(184deg);
        filter: blur(18px) brightness(1.12);
    }

    78% {
        opacity: .05;
        transform: translate(-50%, -50%) scale(1.20) rotate(188deg);
        filter: blur(24px) brightness(1.02);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.30) rotate(192deg);
        filter: blur(30px) brightness(.96);
    }
}

@media (max-width: 767px) {
    .smokeBg__layer--1 {
        opacity: .22;
    }

    .smokeBg__layer--2 {
        opacity: .13;
    }

    .smokeBg__layer--3 {
        opacity: .08;
    }

    .smokeBg__pulse {
        width: 110vw;
        height: 70vw;
        min-width: 0;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .smokeBg__layer,
    .smokeBg__pulse {
        animation: none !important;
    }
}