@charset "UTF-8";
/* CSS Document */

html {
  scroll-behavior: smooth; 
}

body {
  font-family: 'Josefin Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

#formMessage .alert {
  pointer-events: auto;  
  min-width: 300px;
  max-width: 500px !important;
  text-align: center;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.3s ease;
  transform: translateY(0);
  margin-left: auto;
  margin-right: auto;
}

#formMessage .alert.fade-out {
  opacity: 0;
  transform: translateY(-20px);
}


input:focus,
textarea:focus {
  outline: none;
  border-color: red !important;
  box-shadow: none !important; 
}

select:focus {
  outline: none;
  border-color: green !important;
  box-shadow: none !important;
}
#bottomBar {
  transition: opacity .3s ease, transform .3s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
#bottomBar a,
#bottomBar a:link,
#bottomBar a:visited,
#bottomBar a:hover,
#bottomBar a:active {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1.5rem;
    -webkit-text-decoration-color: transparent !important; 
    -webkit-tap-highlight-color: transparent !important;   
}

#bottomBar span.link {
    cursor: pointer;
    color: #fff; 
    text-decoration: none;
}
.margin-bottom-footer{
	margin-bottom:80px; 
}

.map-grayscale iframe {
  filter: grayscale(100%);
}
.heroimage1{
	display: block;
	}
.heroimage2{
	display: none;
	}
.mybtn{
	background-color: #402C00;
	color: #fff;
	opacity:0.9;
}
.mybtnw300{
	background-color: #402C00;
	color: #fff;
	opacity:0.9;
	min-width: 280px !important;
	display: block;
}

.mybtnw300:hover{
	background-color: #402C00;
	color: #fff;
	opacity:1;
	min-width: 280px !important;
	display: block;
}

.mybtn:hover{
	background-color: #402C00;
	color: #fff;
		opacity:1;
}
.footer-text{
	color: #000;
	opacity:.8;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.3rem;
	
}
.bg-gold{
	background-color: #72714C;
}
.bg-brown{
	background-color: #402C00;
}

.navi-title{
	font-size: 2rem;
	color:#fff;
	line-height: 2rem;
	letter-spacing: -0.05rem;
	font-weight: 700;
	font-style: italic;
}
.hero-img img {
  width: 100%;
  height: auto;  
  display: block;
}

.hero-text {
  position: absolute;
  inset: 0;                         
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.opening-status {
  text-align: center;
}

.open-title {
  display: block;
  font-weight: 600;
  font-size: 3rem;
  line-height: 2.8rem;
}

.closed-title {
  display: block;
  font-weight: 600;
  font-size: 3rem;
  line-height: 2.8rem;
	color: black;
}

.open-time {
  display: block;
  font-size: 1.5rem;
  opacity: .8;
  line-height: 1.5rem;
  padding-top: 10px;
}

.open {
  color: black;
}

.closed {
  color: black;
}

.bg-light-white{
	background-color: #fff;
	opacity: 0.9;
}
.title2{
	font-size: 4rem;
	color:black;
	line-height: 4rem;
	letter-spacing: -0.2rem;
	font-weight: 700;
	font-style: italic;
	}

.title2b{
	font-size: 4rem;
	color:black;
	line-height: 4rem;
	letter-spacing: -0.2rem;
	font-weight: 700;
	font-style: normal;
	}



.title-tel{
	font-size: 4rem;
	color:black;
	line-height: 4rem;
	letter-spacing: -0.2rem;
	font-weight: 700;
	font-style: italic;
	}
.title3{
	font-size: 2rem;
	color:black;
	line-height: 2rem;
	letter-spacing: -0.05rem;
	font-weight: 500;
	font-style: normal;
	padding-right:40%;
	}
.body-text{
	font-size: 1.4rem;
	color:black;
	line-height: 1.5rem;
	letter-spacing: -0.05rem;
	font-weight: 400;
	font-style: normal;
	padding-right:40%;
	opacity: .7;
	}

.body-text2{
	font-size: 1.4rem;
	color:black;
	line-height: 1.5rem;
	letter-spacing: -0.05rem;
	font-weight: 400;
	font-style: normal;
	opacity: .7;
	}

.body-text3{
	font-size: 3rem;
	color:black;
	line-height: 3rem;
	letter-spacing: -0.05rem;
	font-weight: 400;
	font-style: normal;
	opacity: .7;
	}

.title4{
	font-size: 2rem;
	color:black;
	line-height: 2rem;
	letter-spacing: -0.05rem;
	font-weight: 400;
	font-style: normal;
	opacity: 1;
	}


.maxw1{
	max-width: 500px;
}

.card:hover{
	background-color: #FFFEF0;
}



@media (max-width: 768px) {
  .body-text, .title2, .title2b, .title3 {
	  text-align: center !important;
	  padding: 10px;
  }
	
	.title-tel{
	font-size: 2rem;
	color:black;
	line-height: 2rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.1rem;
	}
	.navi-title{
	font-size: 1.5rem;
	color:#fff;
	line-height: 1.5rem;
	letter-spacing: -0.05rem;
	font-weight: 700;
	font-style: italic;
}
	.heroimage1{
	display: none;
	}	
	.heroimage2{
	display: block;
	}
}
@media (max-width: 447px) {
  .mobile-space-top {
    padding-top: 70px;
  }
}