@charset "UTF-8";
body{
  background-color: #f1ecd3;
  
}
#top{
}
#top-mp4{width: 100%;
  position: relative;
  display: block;
}
.top1-logo{
  display: none;
}

/*topに戻るボタン始まり*/
.top-btn {
    cursor: pointer;/*カーソルの画像*/
    position: fixed;/*画面固定*/
    right: 20px;/*右から*/
    bottom: 20px;/*下から*/
    background-color: rgba(182, 192, 199, 0.9);/*RGBカラーと透明度*/
    border-radius: 50%;/*角のまるみ*/
    width: 40px;/*幅*/
    height: 40px;/*高さ*/
    z-index: 4;
}
.top-btn span {
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: #fff;
}
.top-btn span:first-child {
    transform: rotate(40deg);
    top: 46%;
    left: 45%;
}
.top-btn span:nth-child(2) {
    transform: rotate(-40deg);
    top: 46%;
    left: 17%;
}
/*topに戻るボタン終わり*/
#top-nav{
  display flex;
  position: relative; 
  margin-top: -120px;
  max-width: 100%;
  height: 120px;
  background-color: #ebd49e;
}

.top-nav2{
  display: flex;
  
}
.top-nav2 li{
  display: block;
  margin-left: 6.805vw/*6.25%*/;
  margin-top: 40px;
  z-index: 5;
}
.top-logo img{}
.top-logo{
  
 
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translate(-50%,0%);
  
}
.top-nav3{
  display: flex;
  position: absolute;
  right: 12.638vw/*5%*/;
  top:  40px;
}
.top-nav3 li{
  display: block;
  
}
.top-nav3 li:last-child{
  margin-right: %;
  margin-left: 6.9444vw/*100px*/;
}
/*#consept{
  height: 604px;
}*/
.cafe-location{
  display: block;
  margin: 0 auto;
  padding-top: 174px;
  padding-left 41%;
  padding-bottom: 50px;
}
#consept p{
  font-family: serif;
  color: #003e52;
  text-align: center;
  font-size: 36px;
  line-height: 1.5em;
  margin-bottom: 174px;
}
/*#shop-room{
  height: 794px;
}*/
.shop-cup{
  width: 32.08%;
  position: relative;
  z-index: 2;
  padding-left: 33.19%;
}

.shop-teble{
  width: 43.19%;
  position: relative;
  z-index: 1;
  margin-top: -126px;
  padding-left: 3.61%;
}
.shop-moji{
  font-family: serif;
  color: #003e52;
  font-size: 36px;
  line-height: 1.5em;
  margin-left: 57.77%;
  margin-top: -164px;
  margin-bottom: 192px;
  background-color: #f1ecd3;
  position: relative;
  z-index: 3;
}
/*#terrace{
  height: 808px;
}*/
.terrace-moji{
  width: 26.38vw/*380px*/;
  font-family: serif;
  color: #003e52;
  font-size: 36px;
  line-height: 1.5em;
  padding-left: 16.25%;
  margin-top: 24px;
  background-color: #f1ecd3;
  position: relative
}
.terrace-chair{
  width: 43.61%;
  padding-left: 51.94%;
  margin-top: -184px;
}
.terrace-teble{
  width: 32.22%;
  padding-left: 32.22%;
  margin-top: -130px;
  margin-bottom: 216px;
}
/*#roas-ting{
  height 788px;
}*/

.roasting-2{
  padding-left: 44.3%;
  display: block;
  
}
#roast{
  display: flex;  
  margin-top: 104px;
}
#roast p{
  font-family: serif;
  color: #003e52;
  font-size: 35px;
  line-height: 1.5em;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 194px;
}
#light-roast{
  width: 34.72%;
  margin-left: 10.97%;
}
#deep-roast{
  width: 34.72%;
  margin-left: 10.27%;
  margin-right: %
}
.l-mp4{
  width: 100%;
}
.r-mp4{
  width: 100%;
}
/*news枠*/
#news{
  margin-bottom: 164px;
}
.news-1{
  margin-left: 46.66%;
  margin-bottom: 116px;
}
#news-2{
  display: flex;
}
#news-2 p{
  font-family: serif;
  color: #003e52;
  font-size: 30px;
  line-height: 1.5em;
  text-align: center;
}
.date{
  margin-top: 12px;
}
#tikeout{
  width: 29.3%;
  margin-left: 2.77%;
}
.tike-out{
  width: 100%;
}
#menu{
  width: 33.05%;
  margin-left: 1.45%;
}
.sandwich{
  width: 100%;
}
#package{
  width: 29.3%;
  margin-left: 1.45%;
}
.package-1{
  width: 100%;
}
/*footer枠*/
#footer-1{
  display: flex;
  position: relative;
  background-color: #ebd49e;
  max-width: 100%;
}
.ft-logo{
  margin-left: 3.75%;
  width: 28%;
}
.tb{
  font-family: serif;
  color: #003e52;
  font-size: 2vw;
  line-height: 1.5em;
  position: absolute;
  right: 8.33%;
  top: 35px;
}
.tb th{
  text-align: left;
  
}
.th-2{
  padding-left:;
}



@media (max-width: 768px) {/*幅768pxまで*/
  /*top動画画像枠*/
  #top1{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  /*top動画画像*/
  #top-mp4{width: auto;
    height: 100vh;
  position: relative;
  display: block;
}
  .top1-logo{
    position:absolute;
    display: block;
    width: 80vw;
    top: 38vh;
    left: 11vw;
    z-index: 1;
    
}
   #top-nav{
  position: relative; 
  margin-top: 0px;
  background-color: #ebd49e;
}
  #top-nav  ul{
    display: block;
    position: static;
  }
  .top-logo{
  position: absolute;
    width: 50vw;
  top: 80px;
  left: 30vw;
  transform: translate(-50%,0%);
}
  #top nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    padding-top: 50px;
    background: rgba(235,212,158,.9);
    font-size: 16px;
    box-sizing: border-box;
    z-index: 12;
}
 
  .top-nav2{
    padding-top: 200px;
    
    display: block;
  }
  .top-nav2 li{
    margin: 0 auto;
    padding-top: 20px;
    padding-left: 30px;
  }
  .top-nav3{
    display: block;
  }
  .top-nav3 li{
    padding-top: 20px;
    padding-left: 30px;
  }
  .top-nav3 li:last-child{
  margin: 0 auto;
}
#top nav ul li {
    padding 10px 28px;
}

#top nav ul li a {
    text-decoration: none;
    color: #ddd;
    font-size: 30px;
}

#top .btn-gnavi {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 13;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

#top .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #666;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

#top .btn-gnavi span:nth-child(1) {
    top: 0
}

#top .btn-gnavi span:nth-child(2) {
    top: 10px
}

#top .btn-gnavi span:nth-child(3) {
    top: 20px
}

#top .btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

#top .btn-gnavi.open span {
    background: #fff
}

#top .btn-gnavi.open span:nth-child(1) {
    width: 24px;
    -webkit-transform: translate(-7px,17px) rotate(45deg);
    transform: translate(-7px,17px) rotate(45deg)
}

#top .btn-gnavi.open span:nth-child(3) {
    width: 24px;
    -webkit-transform: translate(-7px,-17px) rotate(-45deg);
    transform: translate(-7px,-17px) rotate(-45deg)
}
  /*店内の雰囲気*/
  .shop-cup{
  width: 40%;
  position: relative;
  z-index: 2;
  padding-left: 50vw;
}

.shop-teble{
  width: 60%;
  position: relative;
  z-index: 1;
  margin-top: -60px;
  padding-left: 10vw;
}
.shop-moji{
  font-family: serif;
  color: #003e52;
  font-size: 36px;
  line-height: 1.5em;
  text-align: center;
  margin-left: 0;
  margin-top: 130px;
  margin-bottom: 192px;
  background-color: #f1ecd3;
  position: relative;
  z-index: 3;
}
  /*屋外テラス*/
  .terrace-moji{
  width: auto/*380px*/;
    text-align: center;
  font-family: serif;
  color: #003e52;
  font-size: 36px;
  line-height: 1.5em;
  padding-left: 0;
  margin-top: 24px;
  background-color: #f1ecd3;
  position: relative
}
.terrace-chair{
  width: 60%;
  padding-left: 30vw;
  margin-top: 20vh;
}
.terrace-teble{
  width: 40%;
  padding-left: 15vw;
  margin-top: -30vh;
  margin-bottom: 216px;
}
  /*ロースト枠*/
  .roasting-2{
  padding-left: 30vw;
  display: block;
}
  #roast{
  display: flex; 
  flex-direction: column;
  margin-top: 104px;
}
  #light-roast{
  width: 93.75vw;
  margin: 0 auto;
}
#deep-roast{
  width: 93.75vw;
  margin: 0 auto;
}
  #roast p{
    margin-bottom: 150px;
  }
  .l-mp4{
  max-width: 100%;
}
.r-mp4{
  max-width: 100%;
}
  /*NEWS枠*/
  /*box-sizing: border-box;*/
  .news-1{
  margin-left: 38vw;
  margin-bottom: 116px;
}
  #news-2{
    flex-direction: column;
  }
 
  #tikeout{
  width: 65vw/*29.3%*/;
  margin-left 2.77%;
    margin: 0 auto;
}
.tike-out{
  width: 93.33vw;
  margin: 0 -14.49vw;
}
#menu{
  width: 80vw/*33.05%*/;
  margin-left 1.45%;
  margin: 0 auto;
}
.sandwich{
  width: 93.33vw;
  margin: 0 -6.66vw;
}
#package{
  width: 65vw/*29.3%*/;
  margin-left 1.45%;
  margin: 0 auto;
}
.package-1{
  width: 93.33vw;
  margin: 0 -14.49vw;
}
  /*フッター枠*/
  #footer-1{
    flex-direction: column;
  }
  .ft-logo{
  margin: 0 auto;
  width: 28%;
}
  .tb{
  font-family: serif;
  color: #003e52;
  font-size: 2vw;
  line-height: 1.5em;
  position: static;
    max-width: 65%;
    margin-top: 10px;
    margin-bottom: 20px;
  margin-left: 25vw;
}
  
}