body{
font-family: "Zen Kaku Gothic New", sans-serif;
}

.navbar{
color: #312622;
}

.navbar-brand img{
width: 70px;
height: auto;
}


.topbox{
background-image:url("/img/cafe_top.jpg");
background-size: 100%;
width: 100%;
height: 300px;
display: grid;
place-items: center;
}

.topbox h1{
color: #fff;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-size: 2em;
text-align: left;
letter-spacing: 0.3em;
}
@media (max-width: 767.98px) {
.topbox{
width: 100%;
height: 150px;
background-size: cover;
display: grid;
place-items: center;
background-repeat: no-repeat;
}

.topbox h1{
font-size: 1.5em;
}

}




#cafe{
background-color: #eaeae8;
color: #312622;
padding: 5em 0;
font-family: "Zen Kaku Gothic New", sans-serif;
}

#cafe h1{
padding-top: 5px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-size: 2em;
letter-spacing: 0.3em;
color: #312622;
}
#cafe p{
color: #312622;
font-family: "Zen Kaku Gothic New", sans-serif;
}

.coffeimg img{
width: 80px; 
}


.cafeimg img{
width: 100%;
}

.lounge-inner{
position: relative;
margin-top: 2em;
}
.lounge-inner p{
margin-top: 1em;
}
.lounge-nb{
position: absolute;
right: 2em;
top:-2em;
}
.lounge-nb img{
width: 130px;
mix-blend-mode: overlay;
}

.lounge-body h5{
font-size:1.8em;
letter-spacing: 0.1em;
}

@media (max-width: 767.98px) {
#cafe h1{
font-size: 1.5em;
}
#cafe p{
text-align: left;
font-size: 0.8em;
}
.lounge-body h5{
font-size:1.4em;
letter-spacing: 0.1em;
}
.lounge-img img{
margin-top: 1em;
}
}



table{
border-collapse:collapse;
}
th,td{
padding: 20px;
box-sizing: border-box;
line-height: 1.3;
}

.tatemi06{
width: 100%;
}

@media screen and (max-width: 768px){
border-bottom: 1px solid #DDD;
}

.tr01{
text-align: center;
}

.tr01{
@media screen and (max-width: 768px){
display: none;
}
}

th{
border: 1px solid #fff;
background: #D9D4CA;
padding: 20px;
@media screen and (max-width: 768px){
display: block;
border-bottom: none;
}
}

td{
border: 1px solid #fff;
padding: 20px;
text-align: center;
@media screen and (max-width: 768px){

display: block;
border-bottom: 0.5px solid #fff;
width: 100%;
text-align: left;
}

}
td{
@media screen and (max-width: 768px){

display: flex;
align-items: center;
&::before{

content: attr(data-label);
display: block;
color: #FFF;
background: #312622;
margin: 0 10px 0 0;
height: 100%;
padding: 10px;
width: 110px;
text-align: center;
font-size: 0.8em;
}
}

}



.smalltext{
font-size: 0.8em;
}



a.beige {
color: #312622;
background-color: #80AF71;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
}

a.beige:hover {
 
  background: #fff;
}

a.btn-c {
  font-size: 1rem;
  position: relative;
  padding: 0.5rem 3.5rem 0.5rem 3rem;
  border-radius: 100vh;
}




.beige::after{
    content: '';
    border: 0;
    border-top: solid 2px #312622;
    border-right: solid 2px #312622;
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg);
}




#studio{
background-color: #dcaaab;
color: #312622;
padding: 5em 0;
font-family: "Zen Kaku Gothic New", sans-serif;
}

#studio h1{
padding-top: 5px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-size: 2em;
letter-spacing: 0.3em;
color: #fff;
}
#studio p{
color: #312622;
font-family: "Zen Kaku Gothic New", sans-serif;
}



@media (max-width: 767.98px) {
#studio h1{
font-size: 1.5em;
}
#studio p{
text-align: left;
font-size: 0.8em;
}

}





@media screen and (min-width: 768px){
.br-sp {display: none; }
}