@charset "UTF-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family: "Noto Serif JP", serif;
font-weight: 400;
font-style: normal;
color:#3C4655;
}
/*header*/
header{
width: 100%;
margin: 0 auto;
display: flex;
position: fixed;
top: 0;
z-index: 10;
}
.logo{
width: 200px;
margin: 2px auto 20px 20px;
z-index: 10000;
}
/*contents*/
main{
position: relative;
width: 100%;
text-align: center;
}
img{
max-width: 100%;
vertical-align: bottom;
}
h2{
letter-spacing: 10px;
}
/*slide*/
.top-slide{
position: relative;
width: 100%;
}
.slide-t{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
}
.slide-t img{
width: 400px;
}
section{
position: relative;
}
.bg-w{
background-color: #fff;
}
.bg-dbgy{
background-color:rgba(79,101,105,1.00);
color: #fff;
}
/*concept*/
.concept{
position: relative;
display: flex;
align-items: center;
flex-wrap: nowrap;
margin: 100px 0;
}
.concept-t{
background-color:rgba(232,232,232,0.90);
text-align: center;
padding: 50px;
z-index: 1;
margin: 0 0 0 -10%;
width: 80%;
}
.concept-t p{
text-align: left;
line-height: 200%;
}
p.en{
color:#57748A;
margin-top: 40px;
}
/*menu*/
.menu{
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
background-color:rgba(79,101,105,1.00);
color: #fff;
}
.menu-box{
width: 70%;
z-index: 1;
text-align: center;
padding:  0 0 40px;
}
.menu-box h3 span{
font-size: 12px;
margin-left: 10px;
}
img.circle{
clip-path: circle(88% at 20% 35%);
}
.menu-li{
display: flex;
justify-content: space-around;
}
.menu-li li{
text-align: left;
margin-bottom: 6px;
}
p.price{
font-size: 21px;
}
p.price span{
font-size: 14px;
}
/*gallery*/
.gallery-box{
}
.gallery-box h2{
text-align: center;
margin: 100px 0 50px 0;
}
/*reservation*/
.reservation-box{
padding: 40px 0;
}
.reservation-box h2{
text-align: center;
margin:50px 0;
}
.reservation-box h2 span{
display: block;
font-size: 12px;
}
.reservation{
max-width: 1400px;
margin: auto;
}
.reserve{
text-align: center;
}

a.btn {
display: flex;
justify-content: space-evenly;
align-items: center;
text-align: center;
text-decoration: none;
width: 350px;
margin: 50px auto;
padding: 1rem 3rem 1rem 3.5rem;
background: #fff;
color:#001238;
position: relative;
transition: 0.5s;
letter-spacing: 5px;
z-index: 9;
}
a.tablecheck::after{
font-family: 'Material Icons';
content: '\e89e';
}
a.btn:hover{
background:#222;
color: #fff;
}
.notice{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin:auto;
padding:0 0 100px;
}
.notice h3{
display: inline-block;
width: 300px;
letter-spacing: 10px;
}
.notice div{
font-size: 14px;
}
.notice ul{
margin: 20px 0;
list-style: circle;
text-align: left;
}
.notice li{
margin-bottom: 5px;
}
/*access*/
.access{
margin: 100px 0 100px 0;
}
.google-map{
max-width: 80%;
margin: auto;
}
.google-map iframe {
filter: grayscale(80%);
}
/*footer*/
footer{
position: relative;
margin: 0 auto;
background-color: #222;
color: #fff;
padding: 20px 0;
}
.footer-box{
position: relative;
width: 70%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.footer-1{
width: 33%;
}
.footer-2{
width: 33%;
}
.footer-3{
width: 33%;
}
address{
font-style: normal;
font-size: 13px;
}
.footer-1 img{
width: 300px;
}
ul.sns{
margin: 10px auto 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap:20px;
}
ul.sns li{
margin: 0;
padding: 0;
}
ul.sns li.insta{
width: 20px;
}
ul.sns li.youtube{
width: 80px;
}
.mall a{
color: #fff;
text-decoration: none;
}
.mall :hover{
text-decoration: underline;
}
.mall::before{
font-family: 'Material Icons';
content: '\e158';
margin-right: 5px;
vertical-align: middle;
}
.tel a{
color: #fff;
text-decoration: none;
}
.tel :hover{
text-decoration: underline;
}
.tel::before{
font-family: 'Material Icons';
content: '\e0b0';
margin-right: 5px;
vertical-align: middle;
}
p.copy{
text-align: center;
font-size: 14px;
margin: 0 auto;
}
.footer-3 dl{
display: flex;
flex-wrap: wrap;
width: 100%;
font-size: 14px;
}
.footer-3 dt{
width: 20%;
}
.footer-3 dd{
width: 80%;
margin-left: 0;
}
table{
max-width: 1000px;
margin: 40px auto;
border-collapse: collapse;
border: none;
font-size: 12px;
}
td,th{
    border: none;
    border-left: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
	padding: 10px;
}
td:first-child,th:first-child{
    border-left:none;
}
tr:first-child td,tr:first-child th{
    border-top:none;
}
.t-menu{
display: inline-block;
text-align: left;
margin: 20px 20px 0;
font-size: 14px;
}
.t-menu ul{
list-style: circle;
}
.t-menu li{
margin-bottom: 5px;
}
.t-menu li:nth-child(2) {
margin-bottom: 15px;
}
.pc{
display: block;
}
.sp{
display: none;
}
.kuma{
margin: 50px 0 100px 0;
text-align: center;
padding: 0 20px;
}
.kuma p{
line-height: 200%;
}
.g-en{
margin: auto;
max-width: 800px;
text-align: left;
}
.inline{
text-align: left;
display: inline-block;
margin: auto;
max-width: 1000px;
padding: 20px;
}
.inline p{
margin: 0 0 5px;
text-indent: -1em;
padding-left: 1em;
}
.inline p.en1{
margin-top: 20px;
}
@media screen and (max-width:768px) { 
/*slide*/
.top-slide{
position: relative;
width: 100%;
top: -20px;
}
/*concept*/
.concept{
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 20px 0;
}
.concept-t{
background-color:rgba(232,232,232,0.90);
text-align: center;
padding: 50px;
z-index: 1;
margin: 0;
width: 100%;
}
/*menu*/
.menu{
flex-wrap: wrap;
}
.menu-box{
width: 100%;
z-index: 1;
text-align: center;
padding: 40px 0;
}

.notice{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin:auto;
padding:20px 20px 50px;
}
img.circle{
clip-path: circle(100% at 50% 50%);
}
/*access*/
.access{
margin: 50px 20px;
}
.google-map{
max-width: 100%;
margin: auto;
}
/*footer*/
.footer-1{
width: 100%;
justify-content: center;
}
.footer-2{
width: 100%;
justify-content: center;
}
.footer-3{
width: 100%;
justify-content: center;
}
.footer-3 dl{
display: flex;
flex-wrap: wrap;
font-size: 14px;
width: auto;
}
ul.sns{
margin: 10px auto 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap:20px;
}
table{
max-width: 1000px;
margin: 40px auto;
border-collapse: collapse;
border: none;
font-size: 12px;
}
td,th{
    border: none;
    border-left: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
	padding: 10px 5px;
}
.pc{
display:none;
}
.sp{
display:block;
}
.kuma{
margin: 30px 0 50px 0;
text-align: left;
}
}
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}