@charset "UTF-8";
body{
  width: 100%;
}
/*topに戻るボタン始まり*/ 
.top-btn {
    cursor: pointer;
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: rgba(182, 192, 199, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
  z-index: 25;
}
 
.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に戻るボタン終わり*/
img{
}
#top-img{
  position: relative;
  display: block !important;
}
#topsp-img{
  
  display: none !important;
}
.slider img{
  width: 100%;
  
}
.pc{
  
}
.sp{
  
}
.top-logo3{
  display: none;
}
/*ドーナツナビ*/
#donut-nav{
  position: absolute;
  top: 7.57vw /*12.7%*/;
  left: 3.05vw/*%*/;
  height: 39.5vw/*569px*/;
  width: 18.8vw/*271px*/;
  background-image: url(../images/top-navback.png);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 18;
}
.top-logo{
  display: block;
  width: 12.7vw;
  /*margin:37px 46px;*/ 
  margin: 2.57vw 3.19vw;
}
.shop-nav{
  /*font-size: 30px;*/
  font-size: 2.08vw;
  font-weight: 500;
}
.shop-nav li{
  /*margin-bottom: 40px;*/
  margin-bottom: 2.777vw;
  text-align: center;
}
.shop-nav li a{text-decoration: none;
  color: #000/*dimgray*/;}
.top-van{
  width: 47.4%;
  position: absolute;
  /*top: 31.3%;*/
  top: 17.15vw;
  /*bottom: 0;*/
  left: 31.04%;
  z-index: 20;
}
.nami-1{
  width: 100%;
  position: absolute;
  top: 707px;
}
/*お店の紹介*/
#introduction::before{/*波画像*/
  width: 100%;/*この枠の横幅100％*/
  height: 75px;/*この枠の高さ60px*/
  position: absolute;/*絶対位置指定*/
  top: -70px;/*上から－40px*/
  left: 0;/*左から0*/
  content: "";/*何も入れない*/
  display: block;/*縦並び、忘れずに入れる！*/
  background-image: url(../images/nami1-1.png);
  background-position: center top;/*背景画像の位置真ん中で上*/
  background-repeat: repeat-x;/*背景画像横に繰り返し*/
}
#introduction{
  position: relative;
  background-color: #fbc73b;
}
donatu1{
  display: flex;
  position: relative;
  width: 1000px;
  margin: 0 auto;
}
#introduction-shop{
  display:grid;
  margin 85px auto;
  padding-top: 85px;
  padding-left: 37.01vw;
  padding-bottom: 169px;
  
}
.introduction-1{
  margin-left: 5.208vw;
  /*margin-left:  75px;*/
  margin-bottom: 3.125vw;
  /*margin-bottom: 45px;*/
}
.introduction-2{
  display: block;
  width: 39.09vw;
}
.sitoro{
  position: absolute;
  top: 14vw;
  left: 5.069vw;
  width: 26vw;
  z-index: 17;
}

/*ドーナツの種類*/
#types-donuts::before{/*波画像*/
  width: 100%;/*この枠の横幅100％*/
  height: 75px;/*この枠の高さ60px*/
  position: absolute;/*絶対位置指定*/
  top: -40px;/*上から－40px*/
  left: 0;/*左から0*/
  content: "";/*何も入れない*/
  display: block;/*縦並び、忘れずに入れる！*/
  background-image: url(../images/nami1-2.png);
  background-position: center top;/*背景画像の位置真ん中で上*/
  background-repeat: repeat-x;/*背景画像横に繰り返し*/
}
#types-donuts{
  position: relative;
  background-color: #f2934e;
  padding-bottom: 224px;
}
donatu2{
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
typ-do{
  display: flex;
}
/*ドーナツの種類の文字画像*/
.types-donuts1{
  display: block;
  margin: 0 auto;
  padding-top: 125px;
  padding-bottom: 77px;
  justify-content: center;
}
/*ドーナツGIF*/
.types-donuts2{
  position: absolute;
  width:30vw;
  top: -5.55vw;
  left: 66.08vw;
  z-index: 19;
}
/*ドーナツ3つ横並び*/
#types-of-donuts{
  display: flex;
  justify-content: center;
}
/*文字の大きさと余白*/
#types-of-donuts h3{
  font-size: 24px;
  padding-top: 38px;
}
#types-of-donuts p{
  font-size: 18px;
  padding-top: 26px
}
/*ドーナツの画像と説明*/
#choco{
  padding-right: 5.83vw;
  text-align: center;
}
.chocolate{
  max-width: 100%;
}
#sinnamon{
  padding-right: 6.66vw;
  text-align: center;
}
.sinnamon-1{
  max-width: 100%;
}
#almond{
  text-align: center;
}
.almond-1{
  max-width: 100%;
}
/*ドリンクの種類*/
/*ドリンクの種類波の画像*/
#types-drink::before{/*波画像*/
  width: 100%;/*この枠の横幅100％*/
  height: 75px;/*この枠の高さ60px*/
  position: absolute;/*絶対位置指定*/
  top: -40px;/*上から－40px*/
  left: 0;/*左から0*/
  content: "";/*何も入れない*/
  display: block;/*縦並び、忘れずに入れる！*/
  background-image: url(../images/nami1-3.png);
  background-position: center top;/*背景画像の位置真ん中で上*/
  background-repeat: repeat-x;/*背景画像横に繰り返し*/
}
/*ドリンクの種類枠*/
#types-drink{
  position: relative;
  background-color: #a7cab2;
  padding-bottom: 224px;
}
/*ドリンクの種類の画像*/
.drink-menu1{
  display: block;
  width 22.43vw;
  height 3.33vw;
  margin: 0 auto;
  padding-top: 125px;
  padding-bottom: 77px;
  justify-content center;
}
/*ドリンクのGIF*/
.drink-menu2{
  position: absolute;
  width:32vw;
  top: -5.55vw;
  left: 66.08vw;
  
}
/*ドリンクの種類3つ画像*/
#types-of-drinks{
  display: flex;
  justify-content: center;
}
/*ドリンクの種類3つh3*/
#types-of-drinks h3{
  display: block;
  font-size: 30px;
  padding-top: 38px;
  font-weight: 500;
}
/*ドリンクの種類3つp*/
#types-of-drinks p{
  font-size: 18px;
  padding-top: 26px;
  font-weight: 560;
  line-height: 1.8em;
}
/*ココア枠*/
#cocoa{
  padding-right: 5.83vw;
  text-align: center;
  max-width: 100%;
}
.cocoa1{
  max-width: 100%;
}
/*コーヒー枠*/
#coffee{
  padding-right: 5.83vw;
  text-align: center;
  max-width: 100%;
}
.coffee1{
  max-width: 100%;
}
/*フルーツ枠*/
#fruits{
  text-align: center;
  max-width: 100%;
}
.fruits1{
  max-width: 100%;
}
/*営業カレンダー枠の始まり*/
/*営業カレンダー枠の波画像*/
#calendar-section::before{/*波画像*/
  width: 100%;/*この枠の横幅100％*/
  height: 75px;/*この枠の高さ60px*/
  position: absolute;/*絶対位置指定*/
  top: -55px;/*上から－40px*/
  left: 0;/*左から0*/
  content: "";/*何も入れない*/
  display: block;/*縦並び、忘れずに入れる！*/
  background-image: url(../images/nami1-4.png);
  background-position: center top;/*背景画像の位置真ん中で上*/
  background-repeat: repeat-x;/*背景画像横に繰り返し*/
  
}
/*営業カレンダー枠*/
#calendar-section{
  position: relative;
  background-color: #f3eed5;
}
/*営業カレンダー文字画像*/
.calendar-1{
  display: block;
  margin: 0 auto;
  padding-top: 91px;
  padding-bottom: 100px;
}
/グーグルカレンダー*/
.calender2{}

#calender1{
  text-align: center;
  padding-bottom: 200px;
}
/*カレンダー枠*/
#calendar{
  padding-top: 48px;
  padding-bottom: 210px;
}
/*カレンダー*/
.calendar1{
  margin: 0 auto;
}
/*曜日枠*/
.calendar1 th{
  border: 1px solid #000;
  padding: 0.55vw 2.291vw;/*8px 33px;*/
  font-size: 26px;
  background-color: #fadf92;
}
/*曜日枠始まり*/
.calendar1 th:first-child{
  color: #b80004;
}
/*曜日枠終わり*/
.calendar1 th:last-child{
  color:#1760a0;
}
/*日付枠*/
.calendar1 td{
  border: 1px solid #000;
  padding: 2.291vw 2.291vw;/*33px 33px;*/
  font-size: 26px;
  text-align: center;
  background-color: #f9f7ea;
}
/*お知らせ枠*/
#notice::before{/*波画像*/
  width: 100%;/*この枠の横幅100％*/
  height: 75px;/*この枠の高さ60px*/
  position: absolute;/*絶対位置指定*/
  top: -55px;/*上から－40px*/
  left: 0;/*左から0*/
  content: "";/*何も入れない*/
  display: block;/*縦並び、忘れずに入れる！*/
  background-image: url(../images/nami1-5.png);
  background-position: center top;/*背景画像の位置真ん中で上*/
  background-repeat: repeat-x;/*背景画像横に繰り返し*/
  
}
#notice{
  position: relative;
  background-color: #fbc73b;
  padding-bottom: 231px;
}
.osirase{
  display: block;
  margin: 0 auto;
  padding-top: 90px;
  padding-bottom: 106px;
}
#notice1{
  display: block;
  height: 304px;
  max-width: 801px;/*55.83vw;*/
  background-color: #ffffff;
  border-radius: 27px;
  margin: 0 auto;
}
#notice2{
  display: block;
  margin: 0 auto;
  padding-top: 60px;
}
.osirase-2{
  display: block;
  height: 166px;
  max-width: 696px;/*48.75vw;*/
  overflow: auto;
  margin: 0 auto;
}
.osirase-2 tr{
  font-size: 18px;
  line-height 48px;
  height: 48px;
  border-bottom: solid 1px ;
}
.info1{
  padding-top 20px;
  
}
.info1-1{
  padding-right: 47px;
  vertical-align: bottom;
}
.info1-2{
  padding-right: 37px;
  vertical-align: bottom;
}
.info1-3{
  vertical-align: bottom;
}

/*フッター枠始まり*/
/*フッター波画像*/
#footer-nav::before{/*波画像*/
  width: 100%;/*この枠の横幅100％*/
  height: 75px;/*この枠の高さ60px*/
  position: absolute;/*絶対位置指定*/
  top: -65px;/*上から－40px*/
  left: 0;/*左から0*/
  content: "";/*何も入れない*/
  display: block;/*縦並び、忘れずに入れる！*/
  background-image: url(../images/nami1-6.png);
  background-position: center top;/*背景画像の位置真ん中で上*/
  background-repeat: repeat-x;/*背景画像横に繰り返し*/
}
/*フッター枠*/
#footer-nav{
  position: relative;
  background-color: #a7cab2;
}
/*ロゴと文字枠*/
#footer-nav1{
  display: flex;
}
/*ロゴ画像*/
.footer-logo{
  display: block;
  padding-top: 19px;
  padding-left: 23px;
}
/*ナビ枠*/
.footer-nav1{
  display: flex;
  font-size: 24px;
  font-weight: 600;
  padding-top: 96px;
}
/*ナビ枠のli*/
.footer-nav1 li{
  margin-left: 45px;
}
.footer-nav1 li a{
  text-decoration: none;
  color: #000;
}
/*コピーライト枠と画像*/
.copyright{
  display: block;
  margin: 0 auto;
  padding-top: 14px;
  padding-bottom: 23px;
}



@media (max-width: 768px) {/*幅768pxまで*/
  /*box-sizing: border-box;*/
  #top-img{
    display: none !important;
  }
  #topsp-img{
    position: relative;
    display: block !important;
  }
  .top-logo3{
    display: block;
    position: absolute;
    top: 20vh;
    left: 9vw;
    width: 80%;
    background-color: rgba(255,255,255,.5);
    border-radius: 30px;
    padding: 10px 10px;
  }
  .top-van{
    top:110vw;
    left: 5vw;
    width: 90%;
  }
  #donut-nav {
    display: block;
    position: static;
  }
  
  #donut-nav {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    padding-top: 50px;
    background: rgba(255,255,255,.8);
    font-size: 16px;
    box-sizing: border-box;
    z-index: 21;
}
  #donatu .btn-gnavi {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 30px;
    height: 24px;
    z-index: 22;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
  #donatu .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #fff/*#666*/;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
  #donatu .btn-gnavi span:nth-child(1) {
    top: 0
}

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

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

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

#donatu .btn-gnavi.open span {
    background: #666/*#fff*/
}

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

#donatu .btn-gnavi.open span:nth-child(3) {
    width: 24px;
    -webkit-transform: translate(11px,-17px) rotate(45deg);
    transform: translate(11px,-17px) rotate(45deg)
}
  .top-logo{
    width: 200px;
    display: block;
    
  /*margin:37px 46px;*/ 
  margin: 30px 50px;
    
  }
  .shop-nav{
    padding-top: 50px;
    font-size: 1.5em
  }
  .pc{}
  .sp{}
  
  #introduction-shop{
  display: block;
  padding-top: 85px;
  padding-left :0;
  padding-bottom: 25vh;/*169px;*/
  
  }
  .introduction-1{
    display: block;
    margin: 0 auto;
    padding-bottom: 30px
  }
    .introduction-2{
    display: block;
    width: 65.09vw;
      margin: 0 auto;
  }
  .sitoro{
    position: absolute;
    top: 50vh;
    left: 55.069vw;
    width: 26vw;
    z-index: 17;
  }

  /*ドーナツ3つ横並び*/
  #types-of-donuts{
    flex-direction: column;
    }
    #choco{
      padding-right: 0;
      padding-bottom: 20px;
    }
    #sinnamon{
      padding-right: 0;
      padding-bottom: 20px;
    }
    /*ドリンクの種類3つ画像*/
  #types-of-drinks{
    flex-direction: column;
    }
    #cocoa{
       padding-right: 0;
      padding-bottom: 20px;
    }
    #coffee{
      padding-right: 0;
      padding-bottom: 20px;
    }
  .calendar-1{
    max-width: 100%;
  }
    .osirase-2{
    display: block;
    height: 166px;
    max-width: 80.00vw;
    overflow: auto;
    margin: 0 auto;
  }
  .osirase-2 tr{
    
    
  }
  .info1-1{
    display:block; 
  }
  .info1-2{
    display: block; 
  }
  .info1-3{
    display: block;
  }
  /*ロゴと文字枠*/
  #footer-nav1{
    display: block;
  }
  /*ロゴ画像*/
  .footer-logo{
    display: block;
    max-width 14.41vw;
    max-height 9.58vw;
    padding-top: 10px;
    padding-left: 0;
    margin: 0 auto;
  }
  /*ナビ枠*/
  .footer-nav1{
    display: block;
    font-size: 24px;
    font-weight: 600;
    padding-top: 30px;
    margin: 0 auto;
    text-align: center;
  }
  /*ナビ枠のli*/
  .footer-nav1 li{
    margin-left: 0;
    padding-bottom: 10px;
  }
}