@charset "UTF-8";
header {
position: sticky;
top: 0;
z-index: 2;
height: 50px;
}
.headerWrap {
width: 100%;
background: #f8f7f6;
    border-bottom: 1px solid #ebebeb;
}
.active .headerWrap {
position: absolute;
top: 0;
left: 0;
right: 0;
background: #fff;
z-index: 99999;
border-bottom: none;
}
.headerWrap > div {
display: flex;
align-items: center;
justify-content: space-around;
color: #fff;
position: relative;
gap: 10px;
}
.siteTitle {
line-height: 1;
order: 2;
padding: 6px 0;
}
.active .siteTitle {
opacity: 0;
}
.siteTitle a {
font-weight: 400;
text-decoration: none;
font-size: clamp(2.375rem, 2.014rem + 1.48vw, 3.125rem);
color: #8c8f94;
}
header .siteTitle a img {
width: auto;
height: clamp(1.875rem, 1.574rem + 1.23vw, 2.5rem);
}
.BtnWrap {
cursor: pointer;
display: flex;
align-items: baseline;
flex-direction: column;
justify-content: center;
order: 1;
padding: 15px 0;
margin-right: auto;
}
.close-hamburger {
cursor: pointer;
display: flex;
padding: 15px 0;
}
.spNavBtn,.close-footer-nav {
position: relative;
height: 20px;
width: 30px;
}
.spNavBar span,.close-footer-nav-bar span{
display: block;
position: absolute;
height: 1px;
width: 30px;
background: #333;
transition: 0.4s;
}
.active .spNavBar span,.close-footer-nav-bar span{
background: var(--main-color);
}
.spNavBar span:nth-of-type(1) {
top: 0;
}
.spNavBar span:nth-of-type(2) {
top: 9px;
}
.spNavBar span:nth-of-type(3) {
bottom: 0px;
}
.active .spNavBar span:nth-of-type(1) {
transform: rotate(45deg);
top: 9px;
}
.active .spNavBar span:nth-of-type(2) {
opacity: 0;
}
.active .spNavBar span:nth-of-type(3) {
transform: rotate(-45deg);
bottom: auto;
top: 9px;
}
.close-footer-nav-bar span:nth-of-type(1) {
transform: rotate(45deg);
top: 9px;
}
.close-footer-nav-bar span:nth-of-type(2) {
transform: rotate(-45deg);
bottom: auto;
top: 9px;
}
.noscroll::-webkit-scrollbar{
display:none;
}
.hamburgerNav {
background-color: #fff;
height: 100%;
height: 100dvh;
left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
overflow-y: auto;
overscroll-behavior-y: none;
padding-bottom: 57.1px;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.hamburgerNav.panelactive {
opacity: 1;
visibility: visible;
}
.hamburgerNav .nav-sec {
max-width: 615px;
width: 100%;
margin: auto;
height: calc(100dvh - 50px);
}
.hamburgerNav .header-nav {
padding: 80px 20px 0;
}
.hamburgerNav .footer-nav {
padding: 0 20px 0;
}
.hamburgerNav .nav-sec nav {
padding-bottom: 40px;
}
.navList {
font-weight: bold;
}
.navList > li > a,
.navList > li > span {
display: block;
}
.navList > li > a {
padding: 10px 0;
text-align: center;
font-size: clamp(1.25rem, 1.13rem + 0.49vw, 1.5rem);
font-weight: 900;
}
.navList > li > span {
padding: 10px 0 0;
}
.navList > li > ul {
margin-left: 15px;
margin-bottom: 2px;
}
.navList > li > ul > li a {
display: block;
padding: 8px 0;
}
.nav-cta-List {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 20px;
}
.nav-cta-List li {
display: flex;
}
.nav-cta-List li a {
color: var(--main-color);
background: #ffffff;
padding: 20px;
font-weight: 900;
width: 280px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
border: solid 2px var(--main-color);
}
.nav-cta-List .reservation a span {
color: var(--main-color);
font-weight: bold;
}
.nav-sns-List {
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
margin-top: 40px;
}
.nav-cta-List li.tel svg path {
color: var(--main-color);
}
.nav-sns-List li a img {
width: 40px;
}
.pr {
color: #8c8f94;
font-size: 14px;
order: 3;
margin-left: auto;
transition: opacity 0.3s ease;
}
.pr.hidden {
opacity: 0;
}
.active .pr {
opacity: 0;
}