@charset "UTF-8";

/**
 * reset
 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video, main {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
  margin: 0;
}

body {
  font-family: "游ゴシック体 Medium","游ゴシック体 Medium", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, sans-serif;
  background: #fff;
  text-align: center;
}



ol, ul {list-style: none;color: #3e3a39;}
a {text-decoration: none;color:#3e3a39;}
p {font-size: 18px;color:#3e3a39;font-size: 20px;}
@media (max-width: 769px){
  p {font-size: 14px;}
  li{font-size: 12px;}
}

/* img指定 ---------------------------------------*/
img{vertical-align: top;}

/* flex指定 ---------------------------------------*/
.flex{display: flex;justify-content: space-between;flex-wrap: wrap;}

/* 改行指定 ---------------------------------------*/
@media (min-width: 769px){ 
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media (max-width: 768px){ 
  .br-pc { display:none; }
  .br-sp { display:block; }
}

/* float ---------------------------------------*/
.float_r{float: right;}
.float_l{float:left;}
@media (max-width: 768px) {.float_r,.float_l{float:none;}}
.float_end{clear:both;}

/* display設定 ---------------------------------------*/
.pc_only{}
.sp_only{display: none !important;}
@media (max-width: 768px) {
  .pc_only{display:none !important;}
  .sp_only{display: block !important;}
}


/* display設定 ---------------------------------------*/
/* ふわふわアニメーション */
@keyframes updown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}
/* 無限ループ */
.fuwafuwa {
  animation: 3.4s updown infinite;
}

@keyframes updownB {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
}
/* 無限ループ */
.fuwafuwa2 {
  animation: 2.6s updownB infinite;
}



/*----------------------------------------------------

◆　main visual

----------------------------------------------------*/
section#mv{position: relative;width: 100%;height:79.25vw;background:url(../images/mv.png)0 0 no-repeat;background-size:cover;}
h1{position: absolute;top:6vh;left:4%;width: 49%;}
h1 img{width: 100%;}

@media(max-width: 999px){
  section#mv{width: 1200px;height:951px;}
}

/*----------------------------------------------------

◆　lead

----------------------------------------------------*/
.lead1{margin-top: 120px;}
.lead2{margin-top: 80px;}
@media (max-width: 768px) {
  .lead1{width: 100% !important;}
  .lead2{width: 100% !important;}
  .lead1 img{width: 100% !important;}
  .lead2 img{width: 100% !important;}
}


  .wrap{width: 1200px;margin: 0 auto;}

/*----------------------------------------------------

◆ sweetsplate

----------------------------------------------------*/
#sweetsplate{margin-top: 200px;}
#sweetsplate .ctn{width: 1100px;margin:0 auto;}
.swt{width: 64%;position: relative;}
.gls{width: 32%;position: relative;margin-top: 320px;}

.swt-1{position: absolute;right: -250px;top:-120px;}
.swt-2{}
.gls-1{position: absolute;bottom: -100px;left:-110px;}
.gls-2{}

.swt-1 img{width: 450px;}
.swt-2 img{width: 100%;}
.gls-1 img{width: 310px;}
.gls-2 img{width: 100%;}

.swt-menu{margin: 160px 0 100px;}

/*----------------------------------------------------

◆ scone

----------------------------------------------------*/
#scone{margin-top: 160px;}
.scn-ctn{width: 1100px;margin:0 auto;}

.scn-left{width: 48%;}
.scn-right{width: 45%;}

.scn1 img{width: 100%;}
.scn2 img{width: 340px;margin-left: -400px;margin-top: -40px;}
.scn3 img{width: 100%;margin-top: 40px;}

/*----------------------------------------------------

◆ savoryplate

----------------------------------------------------*/
#savoryplate{margin-top: 140px;}
.svp-ctn{width: 1160px;margin:0 auto;}
.svp2,.svp3{width: 100%;}
.svp1 img{width: 460px;margin-left: 40px;}
.svp2 img{width: 100%;margin-top: 300px;}
.svp3 img{width: 100%;}

.svp-left{width: 34%;position: relative;z-index: 100;}
.svp-right{width: 62%;}
.svp1{position: absolute;}

.svp-menu{margin-top: 100px;}
.drink{margin: 120px 0 380px;}


#about{background:#83aec2;position: relative;padding-bottom:70px;width: 100%; }

.profile{background:#fff;width: 1100px;margin:0 auto;padding: 50px;margin-top: 60px; }
.about-img{float:left;margin-top: -230px;margin-left: calc(50% - 400px);margin-bottom: 80px;}
.message{margin-top: 60px;}

#reservation{margin-top: 100px;}
#back_number{margin-top: 150px;}
#annotation{margin-top: 120px;}

@media(max-width: 999px){
  #about{width: 1200px; }
}


/* ---------------------------------------------------

◆　footer

----------------------------------------------------*/

footer{width: 100%;padding: 120px 0 60px;text-align: center;}

/* ---------------------------------------------------

◆　ページトップへ

----------------------------------------------------*/

#pageTop {
    position: fixed;
    bottom: 37px;
    right: 32px;
    font-size: 1.1rem;
    z-index: 100;
}
#pageTop a {
    display: block;
    z-index: 999;
    padding: 10px 16px;
    text-decoration: none;
    text-align: center;
    border-radius: 50px;
    border:1px solid #ccc;
    background: #fff;
    color:#3e3a39;
    transition: all .2s ease;
}
#pageTop a:hover {
    color:#fff;
    padding: 10px 16px;
    background: #83aec2;
    text-align: center;
    border:1px solid #83aec2;
    transition: all .2s ease;
}
@media(max-width: 999px){
  #pageTop{display: none !important;}
  #pageTop a {display: none !important;} 
}