@charset "utf-8";
/* ===========================
 common
 =========================== */

 :root {
    --primary-lightbrown: #9D9684;
    --primary-brown: #4A3D3D;
    --primary-beige: #EDEBE6;
    --contentPadding: 0 2.7%;
    --fontFamilyEN: 'Crimson Text';
    --fontFamilyJP: 'Shippori Mincho';
    --background: 237 235 230;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
    font-size: 62.5%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

body {
    font-family: 'Shippori Mincho', 'Crimson Text';
    background-image: url(../img/background_image.jpg);
    line-height: 1.5;
    color: var(--primary-brown);
    position: relative;

    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}




/* =========================
   fadein
========================= */

.fadein {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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



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

article {
    width: auto;
}

.close__btn {
    display: none;
}

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

p {
    letter-spacing: 2.0px;
}

a {
    cursor: pointer;
}

a:hover {
    opacity: 0.5;
    transition: 0.4s;
}

.mainImg_PC {
    display: block;
}

.mainImg_SP {
    display: none;
}

.spBr {
    display: none;
}


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

header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 37px;
    padding: 0 140px 0 0;
    margin: 0 auto;
}

.mainTitle {
    width: auto;
    margin: min(3vw, 43.2px) 0 calc(-1 * min(4vw, 57.6px)) min(4vw, 57.6px);
    z-index: 200;
}

.diamond {
    width: min(32vw, 460.8px);
    height: min(32vw, 460.8px);
    background: rgba(237, 235, 230, 0.6);
    mix-blend-mode: multiply;
    position: absolute;
    top: min(10vw, 144px);
    left: min(80vw, 1152px);
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 1;
    pointer-events: none;
}

.main__logo {
    width: min(25vw, 360px);
    z-index: 3;
}

.nav__header {
    align-self: flex-start;
    margin-top: 54px;
}

.nav__list {
    display: flex;
    padding-right: 13.9%;
    z-index: 100;
}

.nav__item {
    writing-mode: vertical-rl;
    font-family: var(--fontFamilyJP);
    font-weight: 500;
    font-size: calc(1.1rem  + 0.3vw); /* PC:約1.2rem */
    line-height: 4;
    letter-spacing: min(0.5vw, 7.2px);
    color: var(--primary-brown);
}


.nav__en {
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: inline-block;
}

.nav__btn {
    display: none;
}

.reserve_btn {
    display: block;
    background-color: var(--primary-brown);
    color: #ffffff;
    font-size: calc(0.9rem + 0.6vw); /* PC:約1.8rem */
    height: auto;
    padding: 18px 20px;
    margin: 44px 0 0;
}

.reserve_txt {
    writing-mode: vertical-rl;
    letter-spacing: 0.6rem;
}

.header__btn {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 35px;
    z-index: 9999;
    gap: 24px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.header__btn.is-hide {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.header__btn > .sns_icon {
    width: 30px;
    height: 30px;
    margin: 0 auto;
}

.header__btn > .sns_icon img:last-of-type {
    margin: 20px 0 0;
}

.nav__item:nth-of-type(1) { order: 4; }
.nav__item:nth-of-type(2) { order: 3; }
.nav__item:nth-of-type(3) { order: 2; }
.nav__item:nth-of-type(4) { order: 1; }

.nav__mainlogoSP {
    display: none;
}


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

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

    main {
    margin: 0;
}

    .spBr {
        display: block;
    }

    header {
        display: block;
        padding: 0;
        margin: 8vw auto;
    }

    .header__btn {
        display: block;
    }

    header .sns_icon {
        display: none;
    }

    .nav__mainlogoSP {
        width: 46vw;
        margin: 34px 0 -50px 20px;
        position: relative;

        display: block;
    
    }

    .reserve_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--primary-brown);
        color: #ffffff;
        font-size: calc(0.9rem + 2.0vw); 
        width: 100%;
        height: auto;
        padding: 6vw 0;
        margin: 80px 0 0;
        gap: 2vw;
    }

    .reserve_txt {
        writing-mode: horizontal-tb;
        letter-spacing: 0.6rem;
    }

    .header__btn {
        display: block;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 25000;
        gap: 24px;
    }

    /* ハンバーガーボタン */
    .nav__btn {
        display: block;
        position: relative;
        width: 32px;
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .nav__btn span {
        display: block;
        position: absolute;
        left: 0;
        width: 80%;
        height: 1.5px;
        background: #4A3D3D;
        transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
    }

    .nav__btn span:nth-child(1) { top: 4px; }
    .nav__btn span:nth-child(2) { top: 20px; }

    .nav__btn.active span:nth-child(1) {
        top: 10px;
        transform: rotate(45deg);
    }
    .nav__btn.active span:nth-child(2) {
        top: 10px;
        transform: rotate(-45deg);
    }

    .main__logo {
        width: 46vw;
        margin: 0;
        position: relative;
    
    }

    .mainImg_SP {
        display: block;
        padding: 15px 5.3%;
        height: auto;
        margin: 0 auto;
    }

    .mainTitle {
        width: 300px;
        margin: 26px 0 -50px 20px;
        z-index: 200;
    }

    /* nav 初期状態 */


    .nav__header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--primary-beige);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 12000;
    }

    .nav__header.active {
        opacity: 1;
        visibility: visible;
        margin: 0;
    }

    .nav__headerTop {
        background: #FFFFFF;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 14px 16px 2.7%;
    }

    .nav__topic {
        font-size: calc(0.8rem + 0.4vw); /* SP:約1.3rem */
        letter-spacing: 0.3rem;
        white-space: nowrap;
    }

    .nav__item,
    .nav__itemGray {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: calc(0.9rem + 2.0vw); /* SP:約5vw相当・約2.1rem */
        letter-spacing: 1.2vw;
        line-height: 1;
        color: var(--primary-gray);
        margin-top: 0;
    }

    .nav__item a,
    .nav__itemGray a {
        font-family: var(--fontFamilyJP);
    }

    .nav__item:nth-of-type(1) { order: 4; }
    .nav__item:nth-of-type(2) { order: 3; }
    .nav__item:nth-of-type(3) { order: 2; }
    .nav__item:nth-of-type(4) { order: 1; }

    .nav__item a:hover,
    .nav__itemGray a:hover {
        cursor: pointer;
    }

    .nav__item::before,
    .nav__itemGray::before {
        content: '';
        border: 0.5px solid var(--primary-gray);
        display: inline-block;
        width: 32px;
        margin: 5px 10px;
    }

    .nav__btn {
        display: block;
        width: 15vw;
        height: 15vw;
        cursor: pointer;
        position: fixed;
        top: 11vw;
        right: 0;
        margin: 0 5.3% 20px auto;
        z-index: 20000;
    }

    .diamond {
        width: 240px;
        height: 240px;
        background: rgba(237, 235, 230, 0.6);
        mix-blend-mode: multiply;
        position: absolute;
        top: 50px;
        left: 80%;
        transform: translate(-50%, -50%) rotate(45deg);
        z-index: 1;
        pointer-events: none;
    }

    .nav__list {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        padding-right: 0;
        margin: 16vw 5.3% 0 0;
    }

    .close__btn {
        display: block;
        width: 30px;
        height: 30px;
        cursor: pointer;
        position: absolute;
        top: 45px;
        right: 9.6%;
    }
}


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

.footer {
    background-color: rgba(var(--background) / 60%);
    margin: min(10vw, 144px) 0 0 0;
    padding: min(10vw, 144px) min(10vw, 144px) min(5vw, 72px) min(10vw, 144px);
    position: relative;
    overflow: hidden;
}

.footer_contents {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.mainlogo_footer {
    width: min(18vw, 259.2px);
    height: auto;
}

.btn_link {
    width: 30px;
    height: auto;
}

.logo_subtitle a {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: auto;
}

.subTitle {
    font-size: calc(0.6rem + min(0.3vw, 4.32px)); 
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 0.24rem;
    color: var(--primary-brown);
}

.footer__logo > .reserve_btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(1vw, 14.4px);
}

.footer__logo > .reserve_btn {
    width: min(31vw, 446.4px);
    height: auto;
    min-height: auto;
    text-align: center;
    padding: min(2vw, 28.8px) 0;
    margin: min(2vw, 28.8px) 0;
}

.footer__logo > .reserve_btn p {
    font-family: var(--fontFamilyJP);
    font-weight: 500;
    font-size: calc(1.1rem  + min(0.4vw, 5.76px)); 
    letter-spacing: min(0.4vw, 5.76px);
    color: #fafaf8;
    line-height: 1;
    margin: 0;
}

.footer__logo > .reserve_btn .btn_link {
    width: min(2.4vw, 34.56px);
    height: auto;
}

.footer__txt .copy {
    font-family: var(--fontFamilyJP);
    text-align: center;
    font-weight: 500;
    font-size:0.8vw;
    letter-spacing: 0.21rem;
    margin-top: 6vw;
}

.nav__footer > .sns_icon {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: min(1vw, 14.4px);
    width: min(2.4vw, 34.56px);
    height: auto;
    margin: min(3vw, 43.2px) 0 0 auto;
}

.nav__footer > .nav__list {
    padding-right: 0;
    margin: 0 -20px 0 0;
    z-index: 100;
}

.footer > .diamond {
    position: absolute;
    background: var(--primary-lightbrown);
    opacity: 0.2;
    z-index: 1;
    top: 260px;
    left: 95%;
}


/* =========================
   footer SP
========================= */

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

    .footer {
        height: auto;
        margin: 24vw 0 0;
        padding: 16vw 5vw 26vw;
    }

    .footer_contents {
        display: block;
    }

    .mainlogo_footer {
        width: 45vw;
        height: auto;
    }

    .subTitle {
        font-size: calc(0.6rem  + 1.4vw); /* SP:約1.3rem */
        letter-spacing: 0.5vw;
    }

    .logo_subtitle a {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 4vw;
        width: auto;
    }

    .footer__logo > .reserve_btn {
        display: block;
        width: 100%;
        height: auto;
        margin: 24px 0;
        padding: 0;
    }

    .footer__logo > .reserve_btn a {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding: 24px 0;
    }

    .footer__logo > .reserve_btn p {
        font-family: var(--fontFamilyJP);
        font-weight: 500;
        font-size: calc(0.8rem + 0.8vw); /* SP:約1.6rem */
        letter-spacing: 0.32rem;
        color: #fafaf8;
        line-height: 1;
        margin: 0;
    }

    .footer__logo > .reserve_btn .btn_link {
        width: 24px;
        height: auto;
    }

    .footer__txt .copy {
        font-size: 2.5vw;
        letter-spacing: 0.15rem;
    }

    footer .nav__list {
        display: block;
        padding-right: 0;
        margin: 100px 40px 0 0;
        z-index: 100;
    }

    footer .nav__item {
        writing-mode: horizontal-tb;
        font-family: var(--fontFamilyJP);
        font-weight: 500;
        font-size: calc(1.1rem  + 0.6vw); /* SP:約1.4rem */
        letter-spacing: 0.28rem;
        color: var(--primary-brown);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 20px;
        margin-left: auto;
    }

    

    footer .nav__item:first-of-type {
        margin-top: 0;
    }

    .nav__footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin: 10vw 3vw;
    }

    .nav__footer > .nav__list {
        padding-right: 0;
        margin: 0;
        z-index: 100;
    }

    footer .nav__list {
        order: 2;
    }

    .sns_icon {
        order: 1;
    }

    .nav__footer > .sns_icon {
display: flex;
        justify-content: flex-start;
        align-items: center;
        /* gap: 3vw; */
        width: 6vw;
        height: auto;
        margin: 0;
        }

    .footer > .diamond {
        width: 68vw;
        height: 68vw;
        position: absolute;
        background: var(--primary-lightbrown);
        opacity: 0.2;
        z-index: 1;
        top: 72vw;
        left: 88vw;
    }

    footer .nav__en{
            writing-mode:horizontal-tb;
    }
}

/* ==================================================
   1440px MAX LAYOUT
   1440pxまでは通常表示
   1441px以上は中央固定 + 外側背景 + 影
   二重スクロール防止
================================================== */

.site-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;

    /* 縦スクロール領域を作らない */
    min-height: 100vh;

    /* 横にはみ出す装飾のみカット */
    overflow-x: clip;

    background-image: url(../img/background_image.jpg);
    background-repeat: repeat;
}


/* =========================
   1441px以上
========================= */

@media screen and (min-width: 1441px) {

    body {
        /* 外側 */
        background-image: none;
        background-color: #edeae5;
    }

    .site-wrapper {
        /* サイト本体 */
        box-shadow: 0 0 40px rgba(60, 50, 40, 0.10);
    }

    /* fixedの予約・SNSボタンを
       1440pxサイトの右端に揃える */
    .header__btn {
        right: calc((100vw - 1440px) / 2 + 35px);
    }
}