@charset "utf-8";
/* =====
loading
===== */
#loading{
    width: 100%;
    height: 100vh;
    background-color: var(--primary-white);
    opacity: 0.5;
}

.typing{
    font-family: "Special Elite";
    font-size: 3.2rem;
    letter-spacing: 1.28px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: fixed;
}

.typing span{
    display: none;
}

/*|カーソルを表示*/
.typing:after {
  content: "|";
  animation: typingCursor .8s ease infinite;
}

@keyframes typingCursor {
  from{
    opacity:0;
  }
  to{
    opacity:1
  }
}

/* end of loading */
.loaded{
    display: none;
}

/* fade in container */
.container{
    opacity: 0;
}

.container.open{
    opacity: 1;
    transition: opacity 1.5s ease-in;
}

/* =====
background
===== */
.backgroundimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 93vh;
    overflow: hidden;
    z-index: -1;
}
  
.backgroundimg img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    min-width: 200vw;
    object-fit: cover;
    animation: pan-left 50s ease-in-out forwards;
}

@keyframes pan-left {
    0% {
        transform: translateX(-30vw);
    }
    100% {
      transform: translateX(-100vw);
    }
}

/* pc */
@media screen and (min-width:769px){
    .backgroundimg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 93vh;
        overflow: hidden;
        z-index: -1;
    }
      
    .backgroundimg img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: auto;
        min-width: 120vw;
        object-fit: cover;
        animation: pan-left 50s ease-in-out forwards;
    }
    
    @keyframes pan-left {
        0% {
          transform: translateX(0);
        }
        100% {
            transform: translateX(-20vw);
        }
    }
}
/* =====
header
===== */
.header{
    width: 100%;
    height: 93vh;
    padding: 0px 6.7%;
    display: flex;
    justify-content: space-between;
}

.header__topic{
    font-size: 1.2rem;
    margin-top: 16px;
    color: var(--primary-black);
}

.header__btn{
    cursor: pointer;
}

.header__btn1,
.header__btn2{
    width: 20px;
    height: 1px;
    background-color: var(--primary-black);
    transition: margin-top 0.3s ease;
    cursor: pointer;
}

.header__btn1{
    margin-top: 21px;
}

.header__btn2{
    margin-top: 9px;
}

.header__btn1.header__btnactive{
    margin-top: 25px;
}

.header__btn2.header__btnactive{
    margin-top: 0px;
}

/* nav */
.nav{
    background-color: rgba(225, 225, 225, 0.4); 
    backdrop-filter: blur(8px);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    transition: opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.nav.active{
    opacity: 1;
    pointer-events: auto;
}

.nav__header{
    padding: 25px 6.7%;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
}

.nav__list{
    padding: 0 6.7%;
}

.nav__item,
.nav__item__img,
.nav__instagram{
    width: 82.5px;
    margin-left: auto;
}

.nav__item{
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 30px;
    font-family: var(--primary-fonts2);
}

.nav__item:first-of-type{
    margin-top: 50px;
}

.nav__instagram{
    font-family: Cormorant Garamond;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 1.2px;
    margin-top: 60px;
    position: relative;
}

.nav__instagram::before{
    display: block;
    content: '';
    width: 82.5px;
    height: 0.5px;
    background-image: url(../img/item/nav__item__img.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    top: -30px;
    position: absolute;
}

.nav__instagram::after{
    display: block;
    content: '';
    width: 12px;
    height: 12px;
    background-image: url(../img/item/instagram__icon.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 6.5px;
    top: 0px;
}

.fixed__instagram{
    font-family: var(--primary-fonts2);
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 1.2px;
    width: 57.584px;
    height: 12px;
    transform: rotate(90deg);
    z-index: 100;
    position: fixed;
    top: 83vh;
    right: -10px;
}

.fixed__instagram::after{
    display: block;
    content: '';
    background-image: url(../img/item/instagram__icon__white.webp);
    width: 12px;
    height: 12px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    top: -12px;
    left: 65.3px;
}

.fixed__instagram.bg-black::after {
  background-image: url(../img/item/instagram__icon.webp);
}

/* pc */
@media screen and (min-width:769px){
   .header__btn,
   .nav__header,
   .nav__instagram{
    display: none;
   }

   .header{
        padding: 0px var(--primary-margin120pxpc);
        position: relative;
   }

   .header__topic{
        font-size: 2rem;
        line-height: 1.2;
        padding-top: 48px;
   }

   .nav{
        background-color: transparent; 
        backdrop-filter: none;
        height: auto;
        position: static;
        opacity: 1;
        pointer-events: auto;
    }

    .nav__list{
        display: flex;
        gap: 4.17vw;
        /* 60px */
        position: absolute;
        right: var(--primary-margin120pxpc);
        padding: 0px;
        margin-top: 50px;
    }

    .nav__item {
        font-size: 2rem;
        line-height: 1;
        margin-top: 0px;
        color: var(--primary-black);
        width: auto;
    }

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

    .fixed__instagram{
        font-size: 2rem;
        letter-spacing: 2px;
        width: 95.54px;
        height: 21px;
        top: 83vh;
        right: 0.89vw;
        /* 12.73px */
    }

    .fixed__instagram::after{
        width: 20px;
        height: 20px;
        top: -18px;
        left: 103px;
    }
}
/* ^pc */


/* =====
main
===== */
.main__group{
    position: absolute;
    top: 43vh;
    left: 50vw;
    transform: translateX(-50%);
}
.main__txt{
    font-family: "Zen Old Mincho";
    font-size: 1.6rem;
    color: var(--primary-white);
}

.main__txt1{
    position: relative;
}

.main__txt2{
    position: absolute;
    width: 128px;
    top: 29px;
    left: 18px;
}

.maininfo a{
    padding: 5px 6.7% 5px 3.7%;
    display: flex;
    position: relative;
    height: 52px;
}
 
.maininfo a::after{
    display: block;
    content: '';
    width: 1px;
    height: 20px;
    background-color: rgba(40, 26, 20, 0.80);
    position: absolute;
    left: calc(3.7% + 48px);
} 

.maininfo__imfo{
    font-size: 1.6rem;
    letter-spacing: 0.32px;
}

.maininfo__imfo:nth-child(2){
    letter-spacing: 0.64px;
}

.maininfo__imfo:nth-child(3){
    letter-spacing: 1.12px;
}

.maininfo__txt{
    font-size: 1.4rem;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    width: 74.4%;
    position: absolute;
    left: calc(3.7% + 58px);
}



/* infoの高さ調整 */
@media screen and (min-width:433px){
   .maininfo a{
    height: auto;
   } 
}

/* pc */
@media screen and (min-width:769px){
    .main__group{
        position: absolute;
        top: 50vh;
        left: 50vw;
        transform: translate(-50%,-50%);
    }
    .main__txt{
        font-size: var(--primary-fontsize24px);
    }

    .main__txt1{
        position: relative;
    }

    .main__txt2{
        position: absolute;
        width: 300px;
        top: 48px;
        left: 56px;
    }

    .maininfo a{
        padding: 26px 0px 20px var(--primary-margin120pxpc);
        display: flex;
        position: relative;
        height: 52px;
    }
    
    .maininfo a::after{
        height: 30px;
        left: calc(var(--primary-margin120pxpc) + 50px);
        /* 170px */
        top: 20px;
    } 

    .maininfo__txt{
        font-size: 1.6rem;
        width: auto;
        left: calc(var(--primary-margin120pxpc) + 60px);
        /* 180px */
    }
}

/* =====
story
===== */
h2{
    font-size: var(--primary-fontsize16px);
    line-height: 1;
    margin: 100px auto 0px 12%;
    position: relative;
}

h2::before{
    display: block;
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%; 
    background-color:transparent;
    border: 0.5px solid #D0D0D0;
    position: absolute;
    top: -20px;
    left: -20px;
}

.story__item:first-of-type{
    margin-top: 100px;
}

.story__item{
    display: flex;
    align-items: flex-start;
    margin-top: 120px;
}

.story__img1{
    width: 47.47%;
}

.story__img2{
    width: 51.47%;
    margin-left: 6.7vw;
}

.story__img3{
    width: 42.93%;
}
.story__title,
.story__group{
    writing-mode: vertical-rl;
    font-family: var(--primary-fonts3);
    letter-spacing: 0.2rem;
}


.story__title{
    font-size: var(--primary-fontsize14px);
    line-height: 1;
    margin: -60px 0px 0px 10.67vw;
    /* 40px */
}

.story__txt{
    font-size: var(--primary-fontsize12px);
    line-height: 1;
    margin-left: 5.3vw;
    /* 20px */
}


.story__txt span{
    text-combine-upright: all;
    font-family: Arial, Helvetica, sans-serif;
}

.story__group .story__txt:last-child{
    margin-left: 6.7vw;
    /* 25px */
}

.story__group--1 .story__txt:last-child{
    margin-left: 10.67vw;
    /* 40px */
}

.story__title span,
.story__title--2 span{
    display: block;
}

.story__item:nth-child(2){
    justify-content: end;
}

.story__title--2{
    margin-left: 10.67vw;
}

.story__title--2 span:first-child{
    margin-left: 5.3vw;
}

.story__group__txt{
    display: flex;
    margin: 0 var(--primary-margin25pxsp) 0 auto;
}

.story__group__txt--2{
    margin: 0 auto 0 var(--primary-margin25pxsp);
}

/* pc */
@media screen and (min-width:769px){
    h2{
        font-size: var(--primary-fontsize40px);
        margin: 200px 0px 100px;
        padding-left: var(--primary-margin120pxpc);
    }

    h2::before{
        width: 100px;
        height: 100px;
        top: -50px;
        left: calc(var(--primary-margin120pxpc) - 50px);
    }


    .story__item{
        align-items: center;
        margin-top: 0px;
        justify-content: space-between;
    }

    .story__img1{
        width: 47.22%;
        /* 680px */
    }

    .story__img2{
        width: 40.63%;
        margin-left: 0px;
        /* 585 */
    }

    .story__img3{
        width: 49.86%;
        /* 718 */
    }

    .story__title{
        font-size: var(--primary-fontsize24px);
        margin: 0px 0px 0px 6.94vw;
        /* 100px */
    }

    .story__txt{
        font-size: var(--primary-fontsize16pxpc);
        margin-left: 3.47vw;
        /* 50px */
    }

    .story__group .story__txt:last-child{
        margin-left: 0px;
    }

    .story__group--1 .story__txt:last-child{
        margin-left: 0px;
    }

    .story__item:nth-child(2),
    .story__item:nth-child(3){
        margin-top: 120px;
    }

    .story__title--2{
        margin-left: 6.94vw;
        /* 100px */
    }

    .story__title--2 span:first-child{
        margin-left: 3.47vw;
        /* 50px */
    }

    .story__group__txt{
        display: flex;
        margin: 0 auto;
    }

    .story__group--1{
        margin-top: 32px;
    }

    .story__group--2{
        margin-top: 82px;
    }

    .story__group--3{
        margin-top: 12px;
    }
}
/* ^pc */

/*=====
menu 
=====*/
.background{
    background-image: url(../img/item/backbround.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 100px 0px 40px;
}

.menu{
    margin-top: 0px;
}

.menu__title{
    font-size: var(--primary-fontsize16px);
    line-height: 2.2;
    letter-spacing: 1.6px;
    text-align: center;
    margin-top: 40px;
}

.more{
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 1.6px;
    font-family: var(--primary-fonts2);
    margin-left: 62.4%;
    position: relative;
    margin-top: 40px;
}

.more a::before{
    content: "";
    display: block;
    position: absolute;
    top: 38%;
    left: 42px;
    width: 33px;
    height: 7px;
    border: none;
    border-right: 1px solid var(--primary-black);
    border-bottom: 1px solid var(--primary-black);
    transform: skew(45deg);
    transition: .3s;
}
.more a:hover::before{
    right: 10px;
    width: 43px;
    cursor: pointer;
}

.menu__img1_2{
    display: flex;
    justify-content: space-between;
}

.menu__img1 img{
    width: 40.27vw;
    min-width: 150px;
    aspect-ratio: 3 / 5;
}

.menu__img2 img{
    width: 40vw;
    min-width: 150px;
    aspect-ratio: 30 / 43;
}

.menu__img2{
    margin-top: 117px;
}

.menu__img3 img{
    width: 48vw;
}

.menu__img4 img{
    width: 45.33vw;
}

.menu__img5 img{
    width: 32vw;
}

.menu__img3{
    margin-left: var(--primary-margin25pxsp);
    margin-top: 30px;
}

.menu__img4{
    margin-top: 30px;
    margin-left: 48%;
}

.menu__img5{
    margin-top: -48px;
    margin-left: var(--primary-margin25pxsp);
}

.menu__txt{
    margin: 40px var(--primary-margin25pxsp) ;
    font-size: var(--primary-fontsize14px);
    line-height: 2;
    letter-spacing: 1.4px;
}

.menuitem__drink{
    margin-left: var(--primary-margin25pxsp);
    position: relative;
    width: 42.67vw;
}

.menuitem__toast{
    width: 40vw;
    position: relative;
    margin: 40px auto 20px 44.33%;
}

.menuitem__drink img,
.menuitem__toast img{
    width: 100%;
    height: auto;
    display: block;
}


.menu__drink,
.menu__toast{
    font-family:var(--primary-fonts2);
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 1.4px;
    position: absolute;
    right: 27px;
}

.menu__drink a::before,
.menu__toast a::before{
    content: "";
    display: block;
    position: absolute;
    top: 45%;
    left: 41px;
    width: 22px;
    height: 4px;
    border: none;
    border-right: 1px solid var(--primary-black);
    border-bottom: 1px solid var(--primary-black);
    transform: skew(45deg);
    transition: .3s;
}
.menu__drink a:hover::before,
.menu__toast a:hover::before{
    right: 10px;
    width: 30px;
    cursor: pointer;
}

/* pc */
@media screen and (min-width:769px){
    .background{
        padding: 200px 0px 100px;
    }

    .menu{
        width: 100%;
        height: 140px;
    }

    h2{
        margin-bottom: 0px;
    }

    .menu__title{
        font-size: var(--primary-fontsize24px);
        letter-spacing: 2.4px;
        margin-top: 154px;
        text-align: start;
        margin-left: 35vw;
        /* 504px */
    }

    .more{
        font-size: var(--primary-fontsize24px);
        line-height: 1;
        letter-spacing: 2.4px;
        margin: 235px 0px 0px 51.39vw;
        /* 740px */
    }

    .more a::before{
        left: 10%;
        width: 53px;
        height: 10px;
    }
    .more a:hover::before{
        right: 15px;
        width: 63px;
    }

    .menu__img1_2{
        display: flex;
        justify-content: space-between;
    }

    .menu__img1 img{
        width: 27.14vw;
        /*  380*/
        aspect-ratio: 380 / 578;
    }

    .menu__img2 img{
        width: 29.17vw;
        /* 420 */
        aspect-ratio: 30 / 43;
    }


    .menu__img1{
        margin-top: -578px;
    }
    .menu__img2{
        margin-top: -424px;
    }
    .menu__img3 img{
        width: 33.33vw;
        /* 480 */
        aspect-ratio: 32/33;
    }

    .menu__img4 img{
        width: 24.44vw;
        /* 352 */
        aspect-ratio: 352/270;
    }

    .menu__img5 img{
        width: 16.39vw;
        /* 236 */
        aspect-ratio: 236/249;
    }

    .menu__img3{
        margin-left: var(--primary-margin120pxpc);
        margin-top: 0px;
    }

    .menu__img4{
        margin-top: 113px;
        margin-left: 4.86vw;
        /* 70px */
    }

    .menu__img5{
        margin-top: 335px;
        margin-right:var(--primary-margin120pxpc);
        margin: 335px var(--primary-margin120pxpc) 0px auto;
    }

    .menu__img3_4_5{
        display: flex;
    }

    .br__sp{
        display: none;
    }

    .menu__txt{
        margin: 88px 0px 0px var(--primary-margin120pxpc) ;
        font-size: var(--primary-fontsize16pxpc);
        line-height: 1.5;
        letter-spacing: 1.6px;
    }

    .menuitem__drinktoast{
        display: flex;
    }

    .menuitem__drink{
        margin:176px 0px 0px var(--primary-margin120pxpc); 
        width: 29.17vw;
        /*  420*/
        aspect-ratio: 420.00/431.03;
    }

    .menuitem__toast{
        width: 30.56vw;
        /*  440*/
        aspect-ratio: 110/123;
        margin: -72px var(--primary-margin120pxpc) 0px auto;
        /* 888 */
    }

    .menu__drink,
    .menu__toast{
        font-size: 2rem;
        letter-spacing: 2px;
        right: 50px;
    }

    .menu__drink a::before,
    .menu__toast a::before{
        content: "";
        display: block;
        position: absolute;
        top: calc(50%);
        left: 57px;
        width: 34.8px;
        height: 7.2px;
        border: none;
        border-right: 1px solid var(--primary-black);
        border-bottom: 1px solid var(--primary-black);
        transform: skew(45deg);
        transition: .3s;
    }
    .menu__drink a:hover::before,
    .menu__toast a:hover::before{
        right: 10px;
        width: 44.8px;
        cursor: pointer;
    }

}
/* ^pc */

/* =====
info
===== */
.info{
    margin-top: 120px;
}
.info__img{
    width: 53.33vw;
    max-width: 400px;
    text-align: center;
    display: block;
    margin: 20px auto 0px;
}

.info__txt{
    font-size:var(--primary-fontsize16px);
    font-family: var(--primary-fonts2),var(--primary-fonts3);
    line-height: 200%; /* 32px */
    margin: 40px var(--primary-margin25pxsp) 20px ;
}

.more--info{
    margin-top: 0px;
}

/* pc */
@media screen and (min-width:769px){
    .info{
        margin-top: 220px;
        margin-bottom: 100px;
    }

    .info__group{
        display: flex;
        margin: 0px var(--primary-margin120pxpc) 0px;
        justify-content: space-between;
    }

    .info__txtgroup{
        display: block;
    }
    .info__img{
        width: 27.78vw;
        /* 400 */
        height: 27.78vw;
        max-width: none;
        text-align: unset;
        display: block;
        margin: auto 0px;
        object-fit: cover;
    }

    .info__txt{
        font-size:var(--primary-fontsize24px);
        line-height: 2.2; 
        letter-spacing: 2.4px;
        margin:0px ;
        margin-top: 147px;
    }

    .more--info{
        margin: 123px 0px 0px 75%;
        /* 526px */
    }

    .more--info a::before{
        left: 47%;
    }

}

/* =====
access
===== */
.address iframe,
.parking iframe{
    width: 100vw;
    height: auto;
    margin-top: 40px;
    filter: grayscale(100%);
    aspect-ratio: 125 / 82;
}

.address__group,
.parking__group{
    font-size: var(--primary-fontsize14px);
    font-family: var(--primary-fonts3),Arial, Helvetica, sans-serif;
    line-height: 2;
    letter-spacing: 0.7px;
    margin: 30px auto 0px var(--primary-margin25pxsp);
}

.address__list{
    margin-top: 30px;
}

.address__item{
    margin-top: 10px;
}

.parking__txt:last-of-type{
    margin-top: 28px;
}

/* pc */
@media screen and (min-width:769px){
    .address,
    .parking{
        display: flex;
        justify-content: center;
        gap: 6.46vw;
        /* 93px */
        align-items: center;
    }

    .address{
        margin-top: 100px;
    }

    .parking{
        margin-top: 50px;
    }

    .address iframe,
    .parking iframe{
        width: 48.61vw;
        /* 700px */
        margin-top: 0px;
        aspect-ratio: 35 / 23;
    }

    .address__group,
    .parking__group{
        font-size: var(--primary-fontsize16pxpc);
        letter-spacing: 1.6px;
        margin:0px;
    }

    .address__list{
        margin-top: 50px;
    }

    .address__item{
        margin-top: 20px;
    }

    .address__list:last-of-type{
        margin-top: 80px;
    }

    .address__txt--1{
        margin-top: 20px;
    }

    .parking__txt:last-of-type{
        margin-top: 32px;
    }
}