@charset "utf-8";

body, a{
  color:#696969;
}
/* --------------------------- header */
header{
  height:58px;
}
header > div{
  width:100%;
  position:fixed;
  background:#f5f5f5;
}
header > div > div{
  width:1000px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
}
header > div > div > div{
  padding:8px;
}
header p{
  padding-top:10px;
  font-size:16px;
  width:auto;
}
header p:nth-child(2){
  padding-top:7px;
}
header a{
  color:#696969;
  border-radius:5px;
  padding:2px;
}
header a.hover:hover{
  background:#696969;
  color:#fff;
  transition:1.0s;
}
header nav{
  display:flex;
  justify-content:space-between;
}
header img{
  width:120px;
}
.accbtn{
  width:52px;
}
.accbtn img{
  width:100%;
}
.accpanel{
  position:absolute;
  top:58px;
  left:0;
  z-index:3;
  background:#f5f5f5;
  width:100%;
}
.accpanel ul {
  padding:3%;
}
.accpanel ul div {
  text-align:center;
}
.accpanel ul div .web{
    border: 1px solid #000;
    padding: 2px 15px;
}
.accpanel ul p {
  font-size:20px;
  font-weight:bold;
  padding:2.5% 0;
  border-bottom:2px solid #696969;
}
.accpanel ul p:first-child {
  border-top:2px solid #696969;
}
.accpanel ul p a {
  color:#696969;
  text-decoration:none;
}
.accpanel ul p a span {
  font-size:16px;
}
/* --------------------------- /header */
/* --------------------------- footer */
footer{
  width:100%;
  background:#f5f5f5;
}
footer > div{
  width:1000px;
  margin:0 auto;
  padding:8px 30px;
}
footer > div > p{
  text-align:center;
  
}
footer img{
  width:120px;
}
/* --------------------------- /footer */
/* --------------------------- section */
section{
  width:100%;
  margin-bottom:50px;
}
section > div{
  width:1000px;
  margin:0 auto;
  margin-top:30px;
}
section > h1{
  background:#dcdcdc;
  text-align:center;
  padding:20px 0;
  font-weight:500;
  line-height:100%;
  font-size:28px;
}
section > h1 font{
  font-size:14px;
}
/* --------------------------- /section */
.drink p{
  line-height:110%;
}
.instagram{
  width:45px;
  padding:4px 10px 0 0;
}
p.space{
  padding-top:30px;
}
p.logo_main{
  margin-top:50px;
  text-align:center;
}
p.logo_main img{
  width:30%;
}
p.align_c{
  text-align:center;
}
div.main{
  background-image:url("../img/main.jpg");
  background-position:center top;
  background-repeat:no-repeat;
  background-size:auto 100%;
  height:400px;
  margin-top:0;
}
div.reserve{
  text-align:center;
}
div.reserve > a > p{
  border:1px solid #000;
  padding:8px 30px;
  display:inline-block;
  background:#fff;
  color:#696969;
}
div.reserve > a > p:hover{
  background:#ccc;
  transition:0.5s;
}
.flex{
  display:flex;
  justify-content:space-between;
}
p{
  width:85%;
  margin:0 auto;
}
p.note{
  line-height:110%;
}
p font{
  font-size:20px;
}
p span{
  font-size:16px;
}
.flex p{
  width:49%;
}
dl{
  width:80%;
  margin:0 auto;
}
dt{
  width:30%;
  display:inline-block;
  margin-bottom:12px;
  text-align:right;
}
dd{
  width:70%;
  display:inline-block;
  margin-bottom:12px;
  padding-left:18px;
  vertical-align:top;
}
div.img{
  text-align:center;
}
div.img img{
  width:60%;
}
/* --------------------------- mobile */
.sp{display:none;}
@media screen and (max-width:750px){
.pc{display:none !important;}
.sp{display:inherit;}

body{
}
header > div > div{
  width:100%;
}
section > div{
  width:100%;
  padding-right:1%;
  padding-left:1%;
}
section > div.img{
  padding-right:0;
  padding-left:0;
}
div.img img{
  width:100%;
}
footer > div{
  width:100%;
}
.flex{
  display:inherit;
}
.flex p{
  width:100%;
}
/* --------------------------- @media screen and (max-width:750px) */
}
/* --------------------------- /mobile */