@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/aos/aos.css);
/* @import url(../libs/fontawesome/css/all.min.css); */
@import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css);
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
index
==============================*/

/* mv ----------*/
#mv { position: relative; z-index: 1; width: 100%; height: 100vh; min-height: 60rem; background-color: #050505; margin-bottom: -1px; }
#mv .logo { position: absolute; opacity: 0; top: 20%; left: 10%; z-index: 2; max-width: 35rem; transition: left 0.6s ease-out; }
#mv .mvbg { position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; }
#mv .mvbg li { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; opacity: 0; }
#mv .mvbg li picture { display: block; width: 100%; height: 100%; }
#mv .mvbg li img { width: 100%; height: 100%; object-fit: cover; object-position: center; will-change: transform; }
#mv .mvbg li:nth-child(2) img { object-position: center bottom; }
@media screen and (max-width:1260px) { /* x */
	#mv .logo { left: 2%; }
}
@media screen and (max-width:896px) { /* m */
	#mv .logo { top: 2%; max-width: 42%; }
}
@media screen and (max-width:480px) { /* s */
	#mv { height: auto; min-height: auto; padding-top: 24%; }
	#mv .mvbg { position: relative; height: auto;aspect-ratio: 375 / 385; }
}


/* about ----------*/
#about { background-color: #08140F; padding-top: 13rem; }
#about .txt_01 { display: flex; align-items: center; gap: 4rem; }
#about .txt_01 .tw { width: 50%; }
#about .txt_01 .pw { width: 50%; }
#about .txt_01 .pw img { width: 75rem; max-width: none; }
#about p { color: #FFF; font-size: 1.6rem; line-height: 3.5; }
@media screen and (max-width:1024px) { /* l */
	#about .txt_01 .pw img { width: 60rem; }
}
@media screen and (max-width:896px) { /* m */
	#about .txt_01 { flex-direction: column; }
	#about .txt_01 .tw,
	#about .txt_01 .pw { width: 100%; }
	#about .txt_01 .pw img { margin-left: -3rem; width: calc(100% + 6rem); }
}
@media screen and (max-width:480px) { /* s */
	#about { padding-top: 12rem; }
	#about .txt_01 { padding: 0 7vw; }
	#about .txt_01 .pw img { margin-left: calc((3rem + 7vw) * -1); width: calc(100% + 6rem + 17vw); }
	#about p { font-size: 3.7vw; }
}


/* history ----------*/
#history { overflow: hidden; position: relative; aspect-ratio: 144 / 87; width: 100%; margin-top: -1px; max-height: 87rem; background-image: url(../img/index/history_bg.webp); background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; }
#history .h2i { padding-top: 7.6rem; }
#history .h2i::after { border-color: #A58D87; }
#history .h2i .e { color: #A58D87; }
#history .spimg { display: none; }
#history .txt_01 { position: absolute; width: 100%; bottom: 0; padding: 4.5rem 0; }
#history .txt_01::before { content: ""; top: 0; left: 0; z-index: 1; position: absolute; width: 100%; height: 100%; background-color: rgba(11, 29, 21, 0.48); }
#history .txt_01 .w { position: relative; z-index: 2; display: flex; align-items: center; gap: 4rem; }
#history .txt_01 .w p { color: #FFF; max-width: 65rem; line-height: 2.5; }
#history .txt_01 .w  a { margin-left: auto; }
@media screen and (max-width:1260px) { /* x */
	#history { aspect-ratio: 144 / 110; }
}
@media screen and (max-width:896px) { /* m */
	#history { background-image: none; max-height: none; aspect-ratio: unset; background-color: #08140F; }
	#history .h2i { align-items: center; margin-bottom: 5.7rem; }
	#history .h2i .j { color: #B99469; }
	#history .spimg { display: block; }
	#history .txt_01 { position: relative; padding: 6rem 0 8rem; }
	#history .txt_01 .w { flex-direction: column; }
	#history .txt_01 .w  a { margin-right: auto; }
	#history .bt .bt__ttl {color: #050505; background-color: #98A39C; }
	#history .bt:hover .bt__ttl { color: #FFF; background-color: #69837E; }
}
@media screen and (max-width:480px) { /* s */
	#history .txt_01 .w p { font-size: 3.7vw; }
	#history .txt_01 .w { padding: 0 7vw; gap: 6rem; }
	#history .txt_01 .w .bt { width: 100%; }
}


/* philosophy ----------*/
#philosophy { background-color: #EEF2F1; padding-top: 16rem; padding-bottom: 13rem; }
#philosophy .h2i .j { color: #9F7749; }
#philosophy .w { max-width: 69rem; margin: auto; }
#philosophy .w2 { max-width: 94rem; margin: auto; }
#philosophy .philosophy_pg { margin-top: 10rem; }
#philosophy .philosophy_pg li img { width: 100%; aspect-ratio: 908 / 880; }
#philosophy .philosophy_pg .owl-stage-outer { overflow: visible; }
#philosophy .philosophy_pg .owl-nav { position: absolute; display: flex; left: -20rem; width: calc(100% + 40rem); top: calc(50% - 2rem); }
#philosophy .philosophy_pg .owl-nav .owl-prev {}
#philosophy .philosophy_pg .owl-nav .owl-next { margin-left: auto; }
#philosophy .philosophy_pg .owl-nav .owl-next img { transform: rotate(180deg); }
#philosophy .philosophy_pg .owl-dots { display: none; }
#philosophy .btw { text-align: center; margin-top: 14rem; }
@media screen and (max-width:1400px) {
	#philosophy .philosophy_pg .owl-nav { left: -8rem; width: calc(100% + 16rem); }
	#philosophy .w2 { padding: 0 6rem; }
}
@media screen and (max-width:896px) { /* m */
	#philosophy { padding-top: 6rem; padding-bottom: 6rem; }
	#philosophy .btw { margin-top: 6rem; }
}
@media screen and (max-width:480px) { /* s */
	#philosophy .w { padding: 0 7vw; }
	#philosophy .w p { font-size: 3.7vw; }
	#philosophy .w2 { padding: 0 3rem; }
	#philosophy .philosophy_pg { margin-top: 6rem; }
	#philosophy .philosophy_pg .owl-nav { left: -6rem; width: calc(100% + 12rem); }
}


/* menu ----------*/
#menu { position: relative; background-color: #050505; }
#menu .inner_image { aspect-ratio: 144 / 70; width: 100%; max-height: 70rem; background-image: url(../img/index/menu_bg.webp); background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; }
#menu .h2i .e { color: #A58D87; }
#menu .h2i .j { color: #B99469; }
#menu .h2i::after { border-color: #A58D87; }
#menu .w { display: flex; gap: 4rem; padding-top: 10rem; padding-bottom: 14rem; }
#menu .tw { max-width: 33rem; }
#menu .tw p { color: #FFF; }
#menu .tw .btw { margin-top: 12rem; }
#menu .pw { margin-left: auto; max-width: 60rem; }
#menu .pw ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
#menu .pw ul li img { width: 100%; aspect-ratio: 575 / 452; }
#menu .btw2 { display: none; }
@media screen and (max-width:896px) { /* m */
	#menu .inner_image { aspect-ratio: 144 / 100; }
	#menu .w { flex-direction: column; }
	#menu .tw { margin: auto; max-width: 60rem; }
	#menu .tw .btw { display: none; }
	#menu .pw { margin-right: auto; }
	#menu .btw2 { text-align: center; margin-top: 6rem; }
}
@media screen and (max-width:480px) { /* s */
	#menu .inner_image { aspect-ratio: 375 / 246;  background-attachment: scroll; background-repeat: no-repeat; background-position: center; background-size: cover; }
	#menu .h2i { align-items: center; }
	#menu .tw { padding: 0 7vw; }
	#menu .tw p { font-size: 3.7vw; }
	#menu .btw2 { display: block; }
}


/* group ----------*/
#group { overflow: hidden; background-image: url(../img/index/group_bg.webp); background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; }
#group .h2i .e { color: #ABADAD; }
#group .h2i .j { color: #FFF; }
#group .h2i::after { border-color: #FFF; }
#group .w { position: relative; max-width: 33rem; padding-top: 10rem; padding-bottom: 8rem; }
#group .w::after { position: absolute; z-index: 1; top: 0; right: -10rem; width: 500%; height: 100%; content: ""; background-color: rgba(11, 3, 3, 0.45); }
#group .tw { position: relative; z-index: 2; }
#group .tw p { color: #FFF; }
#group .tw .btw { margin-top: 8rem; }
@media screen and (max-width:480px) { /* s */
	#group {  background-attachment: scroll; }
	#group .w { margin-top: 104vw; width: 100%; max-width: none; padding-top: 5rem; padding-bottom: 6rem; }
	#group .tw { padding: 0 7vw; }
	#group .h2i { align-items: center; margin-bottom: 4rem; }
	#group p { font-size: 3.7vw; }
}


/* reservation ----------*/
#reservation { padding-top: 10rem; padding-bottom: 10rem; background-color: #EEF2F1 }
#reservation h2 { text-align: center; margin-bottom: 10rem; }
#reservation h2 span { letter-spacing: 0.1em; display: inline-block; font-size: 1.8rem; border-bottom:  solid 1px #050505; padding-bottom: 1rem; }
#reservation .reservation_pg { display: flex; gap: 1.5rem; margin-top: 1.5rem; }
#reservation .reservation_pg li { flex: 0 0 auto; width: calc((100% - 3rem) / 3); }
#reservation .reservation_pg li img { width: 100%; aspect-ratio: 720 / 600; }
#reservation .btw { text-align: center; margin-top: 10rem; }
@media (prefers-reduced-motion: reduce) {
	#reservation .reservation_pg { flex-wrap: wrap; }
	#reservation .reservation_pg li:nth-child(n+7) { display: none; }
}
@media screen and (max-width:480px) { /* s */
	#reservation { padding-top: 6rem; padding-bottom: 6rem; }
	#reservation h2 { margin-bottom: 6rem; }
	#reservation .reservation_pg li { width: calc((100% - 3rem) / 2); }
	#reservation .btw { margin-top: 6rem; }
}


/* recruit ----------*/
#recruit { position: relative; aspect-ratio: 144 / 68; width: 100%; max-height: 68rem; background-image: url(../img/index/recruit_bg.webp); background-attachment: fixed; background-repeat: no-repeat; background-position: right 20% center; background-size: cover; }
#recruit::after { position: absolute; z-index: 1; content: ""; width: 45%; height: 100%; top: 0; left: 0; background-color: rgba(50, 3, 3, 0.28); }
#recruit .w { position: relative; z-index: 2; display: flex; align-items: center; position: absolute; bottom: 16rem; width: calc(100% - 6rem); max-width: 110rem; }
#recruit .h2i { margin-bottom: 0; }
#recruit .h2i .e { color: #F4E9E9; }
#recruit .h2i .j { color: #FFF; }
#recruit .h2i::after { border-color: #F4E9E9; }
#recruit .btw { margin-left: auto; }
@media screen and (max-width:960px) {
	#recruit { aspect-ratio: 144 / 90; }
	#recruit::after {  width: calc(32.4rem + 3rem + 10rem); }
	#recruit .w { bottom: 8rem; }
}
@media screen and (max-width:896px) { /* m */
	#recruit::after { width: 100%; height: calc(10rem + 8rem + 8rem); top: 0; left: 0; background-color: rgba(50, 3, 3, 0.28); }
	#recruit .w { flex-direction: column; position: relative; bottom: auto; width: 100%; padding-top: 8rem; padding-bottom: 8rem; }
	#recruit .h2i { align-items: center; }
	#recruit .btw { margin-right: auto; margin-top: 40%; }
}
@media screen and (max-width:480px) { /* s */
	#recruit { background-attachment: scroll; background-position: right 20% center; }
	#recruit .w { padding-top: 4rem; padding-bottom: 4rem; }
	#recruit::after { height: calc(10rem + 4rem + 4rem); }
	#recruit .btw { margin-top: 90vw; }


}


/* access ----------*/
#access { padding-top: 10rem; padding-bottom: 18rem; background-color: #EEF2F1; }
#access .h2i .e { color: #050505; }
#access .h2i .j { color: #9F7749; }
#access .h2i::after { border-color: #69837E; }
#access .w { max-width: 73rem; margin: auto; }
#access iframe { margin-bottom: 3rem; }
#access p { display: flex; align-items: center; flex-flow: wrap; column-gap: 2rem; row-gap: 0; line-height: 2.25;; }
#access p strong { color: #69837E; font-size: 2.2rem; font-weight: normal; }
#access p .tw { display: inline-block; }
#access p .h { color: #69837E; }
#access p.cap { line-height: 1.2; }
#access hr { border: none; border-top: solid 1px #69837E; margin: 1.5rem 0; }
@media screen and (max-width:896px) { /* m */
	#access p .shopname { width: 100%; }
}
@media screen and (max-width:480px) { /* s */
	#access { padding-top: 6rem; padding-bottom: 12rem; }
	#access p strong { font-size: 6vw; }
	#access p { font-size: 3.7vw; }
	#access p .tw { width: 100%; }
}


/* reservationBt ----------*/
/* --stopGap は止まる位置とフッター上端の間隔。負にするとその分フッターに乗る */
#reservationBt { position: sticky; z-index: 6; --btSize: 12.4rem; --ringSize: 16.4rem; --arc: 100deg; --stopGap: calc(var(--btSize) / -2); bottom: calc(50vh - var(--btSize)); width: var(--btSize); margin: calc((var(--btSize) + var(--stopGap)) * -1) 3% var(--stopGap) auto; opacity: 0; visibility: hidden; transform: translateX(25%); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.8s; }
.show_reservationBt #reservationBt { opacity: 1; visibility: visible; transform: translateX(0); }
#reservationBt a { text-decoration: none; color: #FFF; font-size: 1.7rem; line-height: 1.4; text-align: center; display: block; border-radius: 100%; background-color: #050505; width: var(--btSize); aspect-ratio: 1; display: grid;place-items: center; }
#reservationBt a:hover { opacity: 1; background-color: #C0D0CC; color: #050505; }
#reservationBt a span { display: inline-block; margin-top: 1rem; }
#reservationBt a .icon_blank { width: 1.1rem; margin-top: 1.5rem; }
#reservationBt .e { position: absolute; top: calc(var(--btSize) / 2); left: 50%; z-index: -1; width: var(--ringSize); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
#reservationBt .e span { position: absolute; top: 0; left: 50%; height: 50%; line-height: 1; font-size: 1.2rem; transform-origin: 50% 100%; transform: translateX(-50%) rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--arc) / (var(--n) - 1))); transition: all 0.3s ease-out; }
#reservationBt a:hover + .e span { color: #C0D0CC; }
@media screen and (max-width:896px) { /* m */
	#reservationBt { bottom: 2vh; margin-right: auto; margin-left: 3%; }
}