@charset "utf-8";

/* ---------------------------
    共通
----------------------------- */
body {
    background: var(--color-black);
}

/* ---------------------------
    メインコンテンツ
----------------------------- */
.mv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    overflow: hidden;
    z-index: 1;
}

.mv__inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.mv__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: #fff;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.225rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
}

.mv__title::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 63.3rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(37.55% 37.55% at 50% 50%, rgba(187, 115, 0, 0.65) 27.4%, rgba(187, 115, 0, 0.32) 69.71%, rgba(57, 35, 0, 0.00) 100%);
    background-blend-mode: screen;
    z-index: -1;
    /* 灯籠風アニメーション */
    animation: lantern-glow 4s ease-in-out infinite alternate,
        lantern-float 6s ease-in-out infinite;
}



.mv__logo {
    width: 21.6rem;
    height: auto;
}

.mv__img {
    width: 100%;
    height: 100%;
}

.swiper-01 {
    width: 100%;
    height: 100%;
}

.swiper-01 .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.swiper-01 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: 750px) {
    .mv__title img {
        width: 16.2rem;
        height: auto;
    }

    .mv__title {
        width: 100%;
        font-size: 1.9rem;
        line-height: 1.84;
        letter-spacing: 0.171rem;
    }
.mv__title span{
    padding: 0 4rem;
}
    .mv__title::after {
        width: 135%;
    }
}

/* ギャラリー */
.gallery {
    overflow: hidden;
    position: relative;
    z-index: 5;
    margin-top: calc(100lvh + 34.4em);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 9.49%, #000 29.97%);
    color: var(--color-white);
    font-size: 0.694444vw !important;
    padding-top: 57.2em;
    padding-bottom: 42.4em;
}

.gallery__title {
    font-size: 3.2em;
    font-weight: 400;
    letter-spacing: 0.128em;
}

.gallery__text {
    margin-top: 3em;
    font-weight: 400;
}

.gallery__text.large {
    font-size: 1.7em;
    line-height: 2.76;
    letter-spacing: 0.085em;
}

.gallery__text.small {
    font-size: 1.4em;
    line-height: 2.71;
    letter-spacing: 0.07em;
}

.gallery__block img {
    width: 100%;
    height: auto;
}

.gallery__block--top {
    text-align: center;
    padding: 0 10em;
}

.gallery__block--01 {
    margin-top: 46em;
    padding-left: 27.2em;
}

.gallery__block--01 img {
    width: 74.5em;
}

.gallery__block--02 {
    position: relative;
    margin-top: 14.3em;
    padding-left: 21.8em;
    padding-right: 15.6em;
    display: flex;
    align-items: center;
    gap: 11.2em;
}

.gallery__block--02::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    width: 44.1em;
    height: 78.6em;
    background-image: url('../images/top/bgGallery01.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    /* 灯籠風アニメーション */
    animation: lantern-glow-02 6s ease-in-out infinite alternate,
        lantern-float-02 8s ease-in-out infinite;
}

.gallery__block--02 .gallery__contentsWrapper {
    width: 44.7em;
}

.gallery__block--02 img {
    width: 50.7em;
}

.gallery__block--03 {
    margin-top: 15em;
    padding-left: 46.7em;
}

.gallery__block--03 img {
    width: 39.5em;
}

.gallery__block--04 {
    position: relative;
    margin-top: 10.2em;
    padding-left: 14.7em;
    padding-right: 12.6em;
    display: flex;
    align-items: center;
    gap: 12.3em;
}

.gallery__block--04 img {
    width: 50.7em;
}

.gallery__block--04 .gallery__contentsWrapper {
    width: 53.7em;
}

.gallery__block--04::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: block;
    width: 45.1em;
    height: 78.6em;
    background-image: url('../images/top/bgGallery02.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    animation: lantern-glow-02 6s ease-in-out infinite alternate,
        lantern-float-02 8s ease-in-out infinite;
}

.gallery__block--05 {
    margin-top: 17.4em;
    padding-left: 27.2em;
}

.gallery__block--05 img {
    width: 74.5em;
}

.gallery__block--06 {
    position: relative;
    margin-top: 14.3em;
    padding-right: 12.5em;
    padding-left: 14.9em;
    display: flex;
    align-items: center;
    gap: 15.3em;
}

.gallery__block--06 .gallery__contentsWrapper {
    width: 50.6em;
}

.gallery__block--06 img {
    width: 50.7em;
}

.gallery__block--06::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    width: 44.1em;
    height: 78.6em;
    background-image: url('../images/top/bgGallery03.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    animation: lantern-glow-02 6s ease-in-out infinite alternate,
        lantern-float-02 8s ease-in-out infinite;
}

.gallery__block--07 {
    margin-top: 18em;
    display: flex;
    justify-content: center;
}

.gallery__block--07 img {
    width: 39.5em;
}

.gallery__block--08 {
    position: relative;
    margin-top: 9.6em;
    padding-right: 14.6em;
    padding-left: 14.7em;
    display: flex;
    align-items: center;
    gap: 13.4em;
}

.gallery__block--08 .gallery__contentsWrapper {
    width: 50.6em;
}

.gallery__block--08 img {
    width: 50.7em;
}

.gallery__block--08::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: block;
    width: 45.1em;
    height: 78.6em;
    background-image: url('../images/top/bgGallery04.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    animation: lantern-glow-02 6s ease-in-out infinite alternate,
        lantern-float-02 8s ease-in-out infinite;
}

@media screen and (max-width: 750px) {
    .gallery {
        margin-top: 100lvh;
        padding-top: 50rem;
        padding-bottom: 13.2rem;
    }

    .gallery__title {
        font-size: 2.5rem;
        letter-spacing: 0.2rem;
        line-height: 1.4;
    }

    .gallery__block--top .gallery__title {
        text-align: center;
        font-size: 2.2rem;
        font-weight: 500;
        letter-spacing: 0.176rem;
        line-height: 1.4;
    }

    .gallery__text {
        font-weight: 400;
    }

    .gallery__text.large {
        margin-top: 2rem;
        font-size: 1.4rem;
        line-height: 2.57;
        letter-spacing: 0.07rem;
    }

    .gallery__text.small {
        margin-top: 3rem;
        font-size: 1.4rem;
        line-height: 2.57;
        letter-spacing: 0.07rem;
    }

    .gallery__block img {
        width: 100%;
        height: auto;
    }

    .gallery__block--top {
        text-align: left;
        padding: 0 1.5rem;
    }

    .gallery__block--01 {
        margin-top: 20rem;
        padding-left: 0;
    }

    .gallery__block--01 img {
        width: 32.5rem;
    }

    .gallery__block--02 {
        position: relative;
        margin-top: 4.5rem;
        padding: 0 2.5rem;
        align-items: end;
        flex-direction: column-reverse;
        gap: 6rem;
    }

    .gallery__block--02::after {
        width: 33.3rem;
        height: 66.7rem;
        background-image: url('../images/top/bgGallery01Sp.webp');
    }

    .gallery__block--02 .gallery__contentsWrapper {
        width: 100%;
    }

    .gallery__block--02 img {
        width: 28.1rem;
    }

    .gallery__block--03 {
        margin-top: 10rem;
        padding-left: 4.3rem;
    }

    .gallery__block--03 img {
        width: 20.6rem;
    }

    .gallery__block--04 {
        position: relative;
        margin-top: 4.5rem;
        padding: 0;
        flex-direction: column;
        align-items: end;
        gap: 4.5rem;
    }

    .gallery__block--04 img {
        width: 31.8rem;
    }

    .gallery__block--04 .gallery__contentsWrapper {
        width: 100%;
        padding: 0 2.5rem;
    }

    .gallery__block--04::after {
        width: 35.9rem;
        height: 66.7rem;
        background-image: url('../images/top/bgGallery02Sp.webp');
    }

    .gallery__block--05 {
        margin-top: 10rem;
        padding-left: 0;
    }

    .gallery__block--05 img {
        width: 32.5rem;
        margin-left: auto;
    }

    .gallery__block--06 {
        margin-top: 4.5rem;
        padding: 0;
        flex-direction: column-reverse;
        align-items: start;
        gap: 4.5rem;
    }

    .gallery__block--06 .gallery__contentsWrapper {
        width: 100%;
        padding: 0 2.5rem;
    }

    .gallery__block--06 img {
        width: 28.1rem;
        padding-left: 3.4rem;
    }

    .gallery__block--06::after {
        width: 38.1rem;
        height: 66.7rem;
        background-image: url('../images/top/bgGallery03Sp.webp');
    }

    .gallery__block--07 {
        margin-top: 10rem;
        justify-content: end;
        padding-right: 4.3rem;
    }

    .gallery__block--07 img {
        width: 20.6rem;
    }

    .gallery__block--08 {
        margin-top: 4.5rem;
        padding: 0;
        flex-direction: column;
        align-items: start;
        gap: 4.5rem;
    }

    .gallery__block--08 .gallery__contentsWrapper {
        width: 100%;
        padding: 0 2.5rem;
    }

    .gallery__block--08 img {
        width: 31.8rem;
    }

    .gallery__block--08::after {
        width: 33.4rem;
        height: 66.7rem;
        background-image: url('../images/top/bgGallery04Sp.webp');
    }

}

/* Room / Local Guide */
.intro {
    position: relative;
    z-index: 5;
    background: var(--color-black);
    padding: 20rem 0;
    display: flex;
    flex-direction: column;
    gap: 21.7rem;
    overflow: hidden;
}

.intro__block {
    display: flex;
    align-items: center;
    gap: 14.3rem;
    padding-left: 14.3rem;
}

.intro__block:nth-child(2) {
    padding-left: 0;
    padding-right: 14.3rem;
}

.intro__contents {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
}

.intro__contents-inner {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 5.6rem;
}

.intro__title {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.intro__title .en {
    font-size: 5.9rem;
    font-weight: 300;
    letter-spacing: 0.2947rem;
}

.intro__title .ja {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.16rem;
}

.intro__text {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.57;
    letter-spacing: 0.07rem;
}

.intro__link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    font-size: 2.2rem;
    font-weight: 400;
    gap: 9.7rem;
    padding-bottom: 1.9rem;
    border-bottom: 1px solid var(--color-white);
    transition: .5s;
}

.intro__link:hover {
    opacity: 0.5;
}

.intro__img {
    width: 50%;
    aspect-ratio: 4 / 3;
}

.swiper-02 {
    width: 100%;
    height: 100%;
    overflow: visible !important;
}

.swiper-02 .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.swiper-02 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.intro .swiper-02 .swiper-pagination {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 1.8rem;
}

.intro .swiper-02 .swiper-pagination .swiper-pagination-bullet {
    width: 100%;
    height: 0.1rem;
    background: #7B5211;
    margin: 0 !important;
    border-radius: 0;
}

.intro .swiper-02 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #EBE6DF;
}

.intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../images/top/bgIntroTop.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 48rem;
    height: 67.2rem;
    z-index: -1;
     animation: lantern-glow-03 6s ease-in-out infinite alternate,
        lantern-float-03 8s ease-in-out infinite;
}

.intro::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url('../images/top/bgIntroBottom.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 55.1rem;
    height: 56.4rem;
    z-index: -1;
    animation: lantern-glow-03 6s ease-in-out infinite alternate,
        lantern-float-03 8s ease-in-out infinite;
}

@media screen and (max-width: 1280px) {

    .intro__block {
        gap: 8rem;
        padding-left: 8rem;
    }

    .intro__block:nth-child(2) {
        padding-right: 8rem;
    }

}

@media screen and (max-width: 1024px) {

    .intro__block {
        gap: 4rem;
        padding-left: 4rem;
    }

    .intro__block:nth-child(2) {
        padding-right: 4rem;
    }
}

@media screen and (max-width: 750px) {
    .intro {
        gap: 10rem;
        padding: 15rem 0 10rem;
    }

    .intro__block {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 2.5rem;
    }

    .intro__block:nth-child(2) {
        padding: 0 2.5rem;
    }

    .intro__block--column-reverse {
        flex-direction: column-reverse;
    }

    .intro__contents {
        width: 100%;
    }

    .intro__contents-inner {
        gap: 2.6rem;
        max-width: 100%;
    }

    .intro__title {
        align-items: center;
        gap: 0.5rem;
    }

    .intro__title .en {
        font-size: 4.2rem;
        letter-spacing: 0.2rem;
    }

    .intro__title .ja {
        font-size: 1.7rem;
        letter-spacing: 0.136rem;
    }

    .intro__link {
        gap: 6.7rem;
        margin: 0 auto;
    }

    .intro__link svg {
        width: 2.8rem;
        height: 0.8rem;
    }

    .intro__img {
        width: 100%;
    }

    .intro .swiper-02 .swiper-pagination {
        display: none;
    }

    .intro::before {
        background-image: url('../images/top/bgIntroTopSp.webp');
        width: 39rem;
        height: 45rem;

    }

    .intro::after {
        background-image: url('../images/top/bgIntroBottomSp.webp');
        width: 39rem;
        height: 63.3rem;
        bottom: -21rem;
    }
}

/* パララックスセクション */
.fixed-section {
    width: 100%;
    height: 100lvh;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: #EBE6DF;
    /* モバイル対応の追加プロパティ */
    -webkit-overflow-scrolling: touch;

}

.fixed-bg__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip: rect(auto, auto, auto, auto);
    z-index: -1;

}

.fixed-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100lvh;
    background-image: url(../images/top/bgFixed.webp);
    background-size: cover;
    background-repeat: no-repeat;
    /* GPU加速を有効にしてレンダリングを安定化 */
    will-change: transform;
    backface-visibility: hidden;
    /* GPU加速とレンダリング最適化 */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    /* モバイル向け追加最適化 */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

@media screen and (max-width: 750px) {
    .fixed-bg {
        background-image: url(../images/top/bgFixedSp.webp);

        /* モバイルでのパフォーマンス向上 */
        background-attachment: scroll;
        /* fixedの代替 */

        /* iOS Safari対応 */
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;

        /* Android Chrome対応 */
        transform: translateZ(0);
    }

    /* モバイルでposition: fixedが問題な場合の代替案 */
    .fixed-section {
        /* 必要に応じてposition: stickyに変更 */
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    /* さらにラグがある場合の緊急対処法 */
    .fixed-bg--mobile-fallback {
        position: absolute !important;
        height: 100vh;
        /* lvhの代替 */
        background-attachment: scroll !important;
    }
}

/* アクセス */
.access {
    position: relative;
    z-index: 2;
    background: var(--color-main);
}

.access__inner {
    padding: 19rem 4rem 14.3rem;
}

.access__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.access__title .en {
    font-size: 5.9rem;
    font-weight: 300;
    letter-spacing: 0.2947rem;
}

.access__title .ja {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.16rem;
}

.access__map {
    margin-top: 6rem;
    width: 100%;
    aspect-ratio: 1052 / 421;
}

.access__map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.access__list {
    margin-top: 6rem;
    display: flex;
    gap: 7.8rem;
}

.access__item {
    width: 50%;
}

.access__item-title {
    padding-bottom: 2.4rem;
    border-bottom: 1px solid var(--color-black);
    font-size: 2.7rem;
    font-weight: 400;
    line-height: 0.81;
    letter-spacing: 0.135rem;
}

.access__contents {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 4.3rem;
}

.access__contents-title {
    margin-bottom: 2rem;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.11rem;
}

.access__contents-text {
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.07rem;
}

.access__contents-text:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 750px) {
    .access {
        overflow: hidden;
    }

    .access__map {
        position: relative;
        width: 115%;
        left: -7.5%;
    }

    .access__inner {
        padding: 10rem 2.5rem;
    }

    .access__list {
        flex-direction: column;
        gap: 5rem;
    }

    .access__item {
        width: 100%;
    }
}

/* アニメーション */
.JsInview {
    opacity: 0;
    transform: translateY(50px);
    transition: 2s;
}

.JsInview.is-active {
    opacity: 1;
    transform: translateY(0);
}