.fv__mainvisual{
    height: 100svh;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.fv__logo{
    width: 120px;
    aspect-ratio: 195/276.00;
    padding: 10px 8px;
    background: #FEF9DFd9;
    box-shadow: 0px 0px 8px 8px #FEF9DFd9;
    border: 1px solid #FEF9DFd9;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
@media(min-width:768px){
    .fv__logo{
        width: 187px;
        padding: 22px 16px;
    }
}



/*============================
#about.about
============================*/
.about{
    overflow: hidden;
    padding-block: 280px 80px;
    position: relative;
    @media(min-width:768px){
        padding-block: 320px 80px;
    }
    @media(min-width:960px){
        padding-block: 80px;
    }
}
.about__inner{
    background-image: url(../images/about-bg.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.about__image{
    position: absolute;
}
.about__image--top{
    width: 50%;
    aspect-ratio: 414/254;
    clip-path: ellipse(calc(370%/2/414*100) calc(186%/2/254*100) at center);
    -webkit-mask-image: radial-gradient(var(--base) 43%, rgba(255, 255, 255, 0) 54%);
    mask-image: radial-gradient(var(--base)43%, rgba(255, 255, 255, 0) 54%);
    top: 8px;
    left: -28px;
    @media(min-width:960px){
        width: calc(414%/var(--width-pc)*100);
        top: 20px;
        left: 0;
    }
    @media(min-width:1440px){
        left: 47px;
    }
}
.about__image--right{
    width: 80%;
    aspect-ratio: 564/347;
    clip-path: ellipse(calc(491%/2/564*100) calc(311%/2/347*100) at center);
    -webkit-mask-image: radial-gradient(var(--base) 43%, rgba(255, 255, 255, 0) 54%);
    mask-image: radial-gradient(var(--base)43%, rgba(255, 255, 255, 0) 54%);
    top: 70px;
    right: -28px;
    @media(min-width:500px){
        width: 50%;
    }
    @media(min-width:960px){
        width: calc(564%/var(--width-pc)*100);
        top: 314px;
        right: 3px;
    }
}
.about__image--bottom{
    width: 40%;
    aspect-ratio: 309/190;
    clip-path: ellipse(calc(270%/2/309*100) calc(139%/2/190*100) at center);
    -webkit-mask-image: radial-gradient(var(--base) 43%, rgba(255, 255, 255, 0) 54%);
    mask-image: radial-gradient(var(--base)43%, rgba(255, 255, 255, 0) 54%);
    bottom: 10px;
    left: 0px;
    @media(min-width:500px){
        width: 30%;
    }
    @media(min-width:960px){
        width: calc(309%/var(--width-pc)*100);
        left: 177px;
        bottom: 80px;
    }
}
.about__textbox{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    writing-mode: vertical-rl;
    font-family: "Yorutegaki-bold";
}
.about__title{
    margin-left: 32px;
    line-height: 1;
}
.about__title-main{
    font-size: 28px;
    letter-spacing: 0.2em;
}
.about__title-en{
    font-size: 14px;
    padding-top: 16px; 
    position: relative;
    @media(min-width:768px){
        font-size: 20px;
    }
    @media(min-width:1200px){
        font-size: 24px;
        padding-top: 26px;
    }
}
.about__title-en::before{
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    border: 1px solid var(--text-color);
    position: absolute;
    top: 0;
    left: -140%;
    translate: -50% 0;
    @media(min-width:1200px){
        left: 50%;
        height: 24px;
    }
}
.about__texts{
    line-height: 1;
    letter-spacing: 0.2em;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    white-space: nowrap;
}
@media(min-width:768px){
    .about__title-main{
        font-size: 40px;   
    }
    .about__texts{
        font-size: 24px;
        gap: 20px;  
    }
}
@media(min-width:1200px){
    .about__title-main{
        font-size: 56px;   
    }
    .about__texts{
        font-size: 30px;
        gap: 36px;  
    }
}

/*============================
#menu.menu
============================*/
.menu{
    padding-block: 80px;
    overflow: hidden;
    @media(min-width:960px){
        padding-block: 160px 80px;
    }
}
.menu__textbox{
    margin-bottom: 20px;
    @media(min-width:500px){
        margin-bottom: 50px;
    }
    @media(min-width:960px){
        width: calc(480%/var(--width-pc)*100);
        position: absolute;
        top: 80px;
        left: calc(120%/var(--width-pc)*100);;
    }
}
.menu__title{
    margin-bottom: 24px;
}

.menu__slider_container{
    background-color: var(--sub);
    padding-block: 32px;
    width: 95%;
    margin-inline: auto;
    border-radius: 20px;
    @media(min-width:768px){
        position: relative;
        background-color: unset;
        padding-block: unset;
        width: calc(720%/var(--width-pc)*100);
        margin-inline: auto 0;
        z-index: 1;
    }
}
.menu__slider_container::before{
    content: "";
    @media(min-width:768px){
        display: block;
        background-color: var(--sub);
        border-radius: 20px 0 0 20px;
        position: absolute;
        top: -32px;
        left: 12%;
        bottom: -32px;
        right: 0;
    }
    @media(min-width:1200px){
        top: -64px;
        bottom: -64px;
    }
}
.menu__list-image{
    width: 85%;
    margin-inline: auto;

}
.menu__item-div{
    aspect-ratio: 400/330;
    img{
        border-radius: 20px;
    }
    @media(min-width:768px){
        width: 100%;
        padding-inline: 16px;
    }
}
.menu__list-desc{
    width: 95%;
    margin-inline: auto;
    border-radius: 20px;
    margin-top: -20px;
    padding: 1em;
    background-color: var(--main);
    background-image: url(../images/bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    @media(min-width:768px){
        position: absolute!important;
        left: 0;
        top: 17%;
        width: 100%;
        border-radius: unset;
        padding: 20px calc(780%/var(--width-pc)*100) 20px calc(120%/var(--width-pc)*100);
        z-index: 0;
    }
    @media(min-width:960px){
        top: 18%;
    }
    @media(min-width:1200px){
        padding: 36px calc(780%/var(--width-pc)*100) 36px calc(120%/var(--width-pc)*100);
    }
}

.menu__item-name{
    font-size: 20px;
    margin-bottom: 12px;
    @media(min-width:768px){
        font-size: 24px;
        margin-bottom: 24px;
    }
}
.menu__item-price{
    font-size: 14px;
    text-align: right;
}
.menu__ramen_section{
    padding-block: 64px 0;
    padding-inline: 20px;
    max-width: 1080px;
    margin-inline: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    @media(min-width:768px){
        padding-block: 128px 0;
        flex-direction: row;
        align-items: flex-end;
        gap: 26px;
    }
}
.menu__special{
    padding-block: 64px 0;
    padding-inline: 20px;
    max-width: 1080px;
    margin-inline: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    @media(min-width:768px){
        padding-block: 128px 0;
        flex-direction: row-reverse;
        align-items: flex-end;
        gap: 26px;
    }
}
.menu__image{
    width: 85%;
    margin-inline: auto;
    @media(min-width:768px){
        width: calc(342%/1080*100);;
    }
    img{
        border-radius: 20px;
    }
}
.menu__texts{
    flex: 1;
}
.menu__h3{
    font-family: "irohamaru-bold";
    font-size: 20px;
    margin-bottom: 16px;
    line-height: 1.5;
    @media(min-width:768px){
        font-size: 32px;
        margin-bottom: 32px;
    }
}
.menu__p{
    line-height: 1.5;
}

.menu__icon--ume{
    width: calc(320%/ var(--width-sp) * 100);
    max-width: 370px;
    aspect-ratio: 636 / 245;
    position: absolute;
    top: 310px;
    right: -12px;
    z-index: 5;
    @media(min-width:960px){
        width: calc(636%/var(--width-pc)*100);;
        max-width: 636px;
        top: 170px;
    }
}
.menu__icon--petal-1{
    width: 8%;
    aspect-ratio: 39/75;
    max-width: 39px;
    position: absolute;
    top: 50%;
    left: 4px;
    z-index: 5;
    @media(min-width:768px){
        top: 51%;
        left: 43%;
    }
}
.menu__icon--petal-2{
    width: 20%;
    aspect-ratio: 87/86;
    max-width: 87px;
    position: absolute;
    top: 62%;
    right: 0;
    z-index: 5;
    @media(min-width:768px){
        top: 88%;
        right: 10%;
    }
}
.menu__icon--petal-3{
    width: 10%;
    aspect-ratio: 1/1;
    max-width: 42px;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 5;
    @media(min-width:768px){
        left: 40%;
        bottom: 0;
    }
}

.slick-track {
  display: flex!important;
}
.slick-slide {
  height: auto !important;
}
.slick-next:before,
.slick-prev:before{
    color: var(--main)!important;
}
.slick-next{
    @media(min-width:768px){
        top: unset!important;
        right: unset!important;
        left: 125px!important;
        bottom: -28px!important;
        transform: translate(0,0)!important;
    }
}
.slick-prev{
    @media(min-width:768px){
        top: unset!important;
        left: 75px!important;
        bottom: -28px!important;
        transform: translate(0,0)!important
    }
}

/*============================
#scene.scene
============================*/

.scene__part{
    aspect-ratio: 1440/200;

}
.scene__image_syoutyu{
    width: 30%;
    max-width: 280px;
    aspect-ratio: 280/187;
    position: absolute;
    top: 26%;
    left: 20px;
    translate: 0 -50%;
    img{
        border-radius: 20px;
        box-shadow: 8px 8px 12px 0px rgba(0, 0, 0, 0.40);
    }
    @media(min-width:768px){
        top: 27%;
    }
}
.scene__image_beer{
    width: 52%;
    max-width: 340px;
    aspect-ratio: 540/378;
    -webkit-mask-image: radial-gradient(var(--main) 55%, rgba(255, 255, 255, 0) 70%);
    mask-image: radial-gradient(var(--main)55%, rgba(255, 255, 255, 0) 70%);
    position: absolute;
    top: 2%;
    right: 3%;
    @media(min-width:768px){
        width: calc(410%/var(--width-pc)*100);
        top: 696px;
        right: 2%;
        z-index: 3;
    }
    @media(min-width:1200px){
        width: calc(340%/var(--width-pc)*100);
        top: 20%;
    }
}
.scene__image{
    position: relative;
    @media(min-width:768px){
        width: calc(830%/var(--width-pc)*100);
    }
}
.scene__image_tabaco{
    width: 25%;
    max-width: 228px;
    aspect-ratio: 228/152;
    position: absolute;
    top: 0;
    right: 3%;
    translate: 0 -50%;
    z-index: 3;
    -webkit-mask-image: radial-gradient(var(--main) 62%, rgba(255, 255, 255, 0) 72%);
     mask-image: radial-gradient(var(--main)62%, rgba(255, 255, 255, 0) 72%);
    img{
        border-radius: 8px;
    }
    @media(min-width:768px){
        width: calc(228%/830*100);
        right: 10%;
    }
}
.scene__image_room{
    aspect-ratio: 415/311;
    mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 30%);
    @media(min-width:768px){
        img{
            mask-image: linear-gradient(to left, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 1) 20%);
        }
    }
    
}
.scene__container_1{
    background-image: url(../images/section-scene.webp);
    @media(min-width:768px){
        display: flex;
        align-items: center;
    }
}
.scene__inner{
    flex: 1;
    @media(min-width:768px){
        margin-left: calc(-140%/var(--width-pc)*100);;
    }
}
.scene__title{
    width: fit-content;
    margin-bottom: 16px;
    @media(min-width:768px){
        margin-left: auto;
    }
}
.scene__list{
    width: fit-content;
    margin-bottom: 20px;
    @media(min-width:768px){
        margin-bottom: 24px;
    }
}
.scene__list_item{
    padding: 16px 10px 10px 5px;
    border-bottom: 1px solid var(--text-color);
    font-family: "irohamaru-bold";
    font-size: 18px;
    @media(min-width:768px){
        font-size: 20px;
    }
    p{
        position: relative;
        padding-left: 1em;
    }
}
.scene__list_item p::before{
    content: "・";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
}
.scene__text{
    margin-bottom: 36px;
}
.scene__container_2{
    background-image: url(../images/room-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-block: 120px;
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    filter: brightness(105%);
    @media(min-width:768px){
        flex-direction: row;
        align-items: flex-end;
        padding-block: 180px 200px;
        padding-inline: unset;
        padding-left: calc(120%/var(--width-pc)*100);
    }
}
.scene__image_ume-2{
    width: 80%;
    aspect-ratio: 870/430;
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -28%;
    @media(min-width:768px){
        width: calc(870%/var(--width-pc)*100);
        top: 27%;
    }
    @media(min-width:1200px){
        top: 40%;
    }
}
.scene__image_palet_1{
    width: calc(80%/var(--width-pc)*100);
    max-width: 80px;
    aspect-ratio: 1;
    position: absolute;
    top: 82%;
    right: 17%;
    @media(min-width:768px){
        top: 70%;
        right: 32%;
    }
}
.scene__image_palet_2{
    width: calc(47%/var(--width-pc)*100);
    max-width:470px;
    aspect-ratio: 47/65;
    position: absolute;
    bottom: 10%;
    left: 10%;
}
.scene__group_texts{
    color: var(--sub);
    @media(min-width:768px){
        flex: 1;
    }
}
.scene__h3{
    font-family: "irohamaru-bold";
    font-size: 20px;
    margin-bottom: 16px;
    @media(min-width:768px){
        font-size: 32px;
        margin-bottom: 32px;
    }
}

.scene__group_image{
    width: 70%;
    aspect-ratio: 576/290;
    overflow: hidden;
    margin-left: auto;
    box-shadow: 8px 8px 12px 0px rgba(0, 0, 0, 0.40);
    @media(min-width:768px){
        width: calc(576%/var(--width-pc)*100);
        aspect-ratio: 576/355;
    }
}

/*============================
#info.infomation
============================*/
.infomation{
    padding-block: 40px;
    @media(min-width:768px){
        padding-block: 80px;
    }
}
.infomation__image{
    width: 23%;
    aspect-ratio: 180/226;
    position: absolute;
    top: 110%;
    right: calc(118%/var(--width-pc)*100);
    translate: 0 -40%;
    img{
        border-radius: 20px;
        box-shadow: 8px 8px 12px 0px rgba(0, 0, 0, 0.40);
    }
    @media(min-width:768px){
        width: calc(180%/var(--width-pc)*100);
        top: 100%;
    }
}
.infomation__palet_1{
    width: 10%;
    aspect-ratio: 64/33;
    position: absolute;
    top: 80px;
    left: 50%;
    @media(min-width:768px){
        width: calc(65%/var(--width-pc)*100);
    }
}
.infomation__title{
    margin-bottom: 40px;
}
.infomation__list{
    padding: 20px 40px;
    width: fit-content;
    margin-inline: auto;
    border-radius: 20px;
    border: 4px solid var(--main);
    background: var(--sub);
    @media(min-width:768px){
        padding: 20px calc(200%/1200*100);
    }
}
.infomation__item{
    margin-bottom: 20px;
}
.infomation__item:last-child{
    margin-bottom: unset;
    a{
        border-bottom: unset;
    }
}
.infomation__link{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 16px;
    border-bottom: 1px solid var(--main);
}
.infomation__time{
    font-size: 14px;
}
.gallery{
    padding-block: 40px;
    overflow: hidden;
    @media(min-width:768px){
        padding-block: 80px;
    }
}
.gallery__image{
    width: 20%;
    aspect-ratio: 153.80/140.00;
    position: absolute;
    top: 80%;
    left: 0;
    z-index: 5;
    @media(min-width:768px){
        width: calc(153%/var(--width-pc)*100);
        max-width: 153px;
        top: 100%;
        left: 4%;
    }
}
.gallery__title{
    margin-bottom: 40px;
    @media(min-width:768px){
        margin-bottom: 64px;
    }
}

.gallery__instagram_container{
    background-color: var(--main);
    background-image: url(../images/bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 24px;
    border-radius: 10px;
    @media(min-width:768px){
        padding: 24px calc(160%/1200*100);
    }
}
/*============================
#access.access
============================*/
.access{
    padding-block: 40px;
    @media(min-width:768px){
        padding-bottom: 80px;
    }
}
.access__image-palet{
    width: 16%;
    aspect-ratio: 158/166;
    position: absolute;
    top: 110%;
    left: 50%;
    z-index: 3;
    @media(min-width:768px){
        width: calc(158%/var(--width-pc)*100);
        left: 75%;
    }
}
.access__title{
    margin-bottom: 64px;
    @media(min-width:768px){
        margin-bottom: 100px;
    }
}

.access__image_shop{
    aspect-ratio: 652/676;
    width: 90%;
    position: relative;
    translate: 24px 24px;
    margin-bottom: 32px;
    img{
        border-radius: 20px;
    }
    @media(min-width:768px){
        width: calc(652%/1200*100);;
    }
}
.access__image_shop::before{
    content: "";
    background-image: url(../images/bg.webp);
    background-color: var(--main);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    translate: -24px -24px;
    z-index: -1;
    border-radius: 20px;
    @media(min-width:768px){
        translate: -40px -36px;
    }
}
.access__image_shop--1{
    width: 100%;
    height: 100%;
}
.access__image_shop--2{
    width: 30%;
    aspect-ratio: 192 / 275;
    position: absolute;
    top: 200%;
    right: 0;
    translate: 25% -40%;
    @media(min-width:768px){
        width: calc(191%/652*100);
        top: 150%;
    }
    @media(min-width:960px){
        top: 90%;
    }
    img{
        border-radius: 20px;
        box-shadow: 4px 4px 4px 0px #00000080;
    }
}
.access__info-dl{
    border-radius: 20px;
    border: 1px solid var(--main);
    background: var(--sub);
    padding: 16px;
    @media(min-width:768px){
        padding: 24px;
        width: calc(800%/var(--width-pc)*100);
        position: absolute;
        bottom: 5%;
        right: 58px;
    }
    @media(min-width:1200px){
        width: calc(536%/var(--width-pc)*100);
    }
}
.access__info-row{
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 16px;
    @media(min-width:768px){
        font-size: 16px;
        flex-direction: row;
        gap: 24px;
        margin-bottom: 12px;
    }
}
.access__info-label{
    @media(min-width:768px){
        width: 4.5em;
    }
}
.access__info-value{
    padding-left: 1em;
    @media(min-width:768px){
        padding-left: unset;
        flex: 1;
    }
}
.map{
    background-color: var(--base);
    position: relative;
    padding-bottom: 80px;
    @media(min-width:768px){
        padding-bottom: 160px;
    }
    iframe{
        width: 100%;
    }
}