@charset "UTF-8";
body {
  font-family: "メイリオ", sans-serif;
}

.container0 {
  width: 100%;
  height: 100vh;
}

.loading {
  position: fixed;
  top: 40vh;
  left: 35vw;
}

.container {
  /* display: none; */
  width: 100%;
  height: 200vh;
  padding: 0;
}

.top {
  position: relative;
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  height: 100vh;
}

#bg-video {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 100%;
  height: 100%;
  width: auto;
  z-index: -100;
  background: url("./img/guestcard-photo.jpg") no-repeat;
  background-size: cover;
}

.takuhai {
  position: absolute;
  top: 6vw;
  right: 5vw;
  font-size: calc(3vh + 2vw);
  color: white;
  font-family: "明朝体", serif;
}

.biostei {
  position: absolute;
  top: calc(5vh + 12vw);
  right: 10vw;
}

.ishoku_dougen {
  position: absolute;
  top: calc(50vh + 5vw);
  left: 13%;
  width: calc(15vh + 10vw);
  z-index: 10;
}

.content {
  margin: 0;
  margin-top: 5vw;
  width: 100%;
  /* height: calc(40vh + 69vw); */
  background: linear-gradient(#fff, #cdb);
}

.policy_wrap {
  text-align: center;
  padding-top: 3vw;
}

.policy {
  width: calc(38vh + 48vw);
  height: calc(4vh + 4vw);
}

.catch {
  margin-top: calc(4vh + 9vw);
  left: calc(-10vh + 57vw);
  width: calc(20vh + 30vw);
}

.yasai_wrap {
  margin-top: 0vw;
  left: 3%;
  height: calc(30vh + 30vw);
}

.yasai {
  float: left;
  margin-bottom: 1vw;
  margin-right: 5vw;
  width: 42%;
}

.message {
  font-size: calc(1.4vh + 1.4vw);
}

.tenpo {
  float: right;
  margin-top: calc(5vh + 5vw);
  margin-right: 10px;
  width: calc(45vw);
}

.riyouhou_wrap {
  height: auto;
  background-color: #f3f7fa;
  padding-top: 15vw;
  margin-top: 3vw;
  /*タイトルを枠の上に乗せるために後書きしており、その影響でこう言う変わったことをしています*/
}

.riyouhou {
  position: relative;
  margin-left: 5%;
  width: 90%;
  height: auto;
  border: 4px #cdf dotted;
  border-radius: 10px;
  padding: 5vw;
  font-size: calc(0.4vh + 1.6vw);
  line-height: calc(1.3vh + 1.3vw);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: white;
}

.title {
  position: absolute;
  top: -30px;
  left: calc((100% - (10vh + 10vw)) / 2);
  padding: 10px;
  font-size: calc(2vh + 2vw);
  background-color: white;
  border-top: 8px #cdf solid;
  border-bottom: 8px #cdf solid;
}

.index {
  background-color: #c1e588;
}

.index0 {
  letter-spacing: calc(0.4vh + 0.4vw);
}

.obi {
  margin-top: 6vw;
  width: 100%;
  height: calc(22vh + 12vw);
  padding-top: 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.menubox {
  width: 49%;
  height: 100%;
}

.chumonbox {
  width: 49%;
  height: 100%;
}

.monthly_menu_box {
  margin-top: 0;
  margin-bottom: 1vw;
  margin-left: calc(2vh + 4vw);
  width: 72%;
  height: calc(4vh + 4vw);
  padding-left: 1vw;
  padding-top: 0;
  font-size: calc(0vh + 3vw);
  /*「月のメニュー」の大きさ*/
  line-height: calc(4vh + 4vw);
  background-color: #afd;
  border: 1px #555 solid;
  border-radius: 4px;
  text-align: center;
  -webkit-box-shadow: 3px 3px 1px #5e767e;
  box-shadow: 3px 3px 1px #5e767e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.menumonth {
  display: inline-block;
  font-size: calc(3vh + 3vw);
  line-height: calc(4vh + 4vw);
  color: white;
  text-shadow: 2px 2px 1px blue;
}

.bentou_sample {
  display: inline-block;
  width: calc(3vh + 3vw);
}

.chumon {
  margin-top: 0;
  margin-left: 0%;
  width: calc(20vh + 20vw);
  -webkit-filter: drop-shadow(4px 4px 2px #999);
  filter: drop-shadow(4px 4px 2px #999);
  cursor: pointer;
}

.edit {
  margin-left: 0%;
  margin-top: calc(1vh + 1vw);
  width: calc(20vh + 20vw);
  height: calc(2vh + 2vw);
  background-color: #666;
  border-radius: 6px;
  color: white;
  font-size: calc(1vh + 1vw);
  text-align: center;
  line-height: calc(2vh + 2vw);
  -webkit-filter: drop-shadow(4px 4px 2px #999);
  filter: drop-shadow(4px 4px 2px #999);
  cursor: pointer;
}

/*メニュー一覧の挿入画面*/
.insert {
  display: none;
  position: relative;
  margin-top: 0;
  margin-left: calc((100vw - 20vh - 50vw) / 2);
  width: calc(20vh + 50vw);
  background-color: #def;
  border: 2px #7df double;
}

.menu_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3vw;
  text-align: center;
}

.menu_title {
  top: 2.5vw;
  font-size: calc(1.4vh + 1.4vw);
}

.delete {
  position: absolute;
  top: calc(0.4vh + 0.4vw);
  right: calc(0.4vh + 0.4vw);
  width: calc(2.5vh + 2.5vw);
  height: calc(2.5vh + 2.5vw);
  color: #28a;
  font-size: calc(1.8vh + 1.8vw);
  background-color: #f1f5ff;
  border: 1px #28a solid;
  border-radius: 4px;
  text-align: center;
  line-height: calc(2.5vh + 2.5vw);
  cursor: pointer;
}

.menutable0,
.menutable1 {
  margin-top: 90px;
  margin-bottom: 50px;
  margin-left: 5%;
  width: 90%;
  height: 82vw;
  border-collapse: collapse;
  border: 3px #c1e588 doiuble;
  background-color: white;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

th,
td {
  border: 1px #347 solid;
  height: 1.8vw;
  font-size: calc(0.9vh + 0.9vw);
}

.date,
.youbi {
  width: 6%;
}

/*.menuindex {
     width: 88%;
 }*/
.date_td,
.youbi_td {
  text-align: center;
}

/**********************/
.hosoku {
  width: 100%;
  height: 22vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 2%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #eef7f2;
}

.hosoku_a {
  display: block;
  width: 45%;
  height: 15vw;
  text-decoration: none;
}

.hosoku_box {
  margin: 1%;
  width: 100%;
  height: 100%;
  border: 1px #777 solid;
  border-radius: 10px;
  padding: 2vw;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div {
  display: block;
  /* height: calc(1vh + 1vw); */
  font-size: calc(0.2vh + 1.3vw);
}

.p2 {
  font-size: calc(0.9vh + 1.5vw);
}

.p3 {
  color: blue;
  font-size: calc(0.8vh + 1.4vw);
  text-shadow: 1px 1px 0 white;
}

.p4 {
  color: red;
  font-size: calc(1.5vh + 1.5vw);
}

.p5 {
  color: red;
  font-size: calc(1.5vh + 1.5vw);
}

.muryo {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ddf4ff),
    to(#9ad5f6)
  );
  background: linear-gradient(#ddf4ff, #9ad5f6);
}

.kaisuken {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#dfe),
    to(#aed)
  );
  background: linear-gradient(#dfe, #aed);
}

.arrow {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}

.arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 0px;
  border-top: solid 4px white;
  border-right: solid 4px white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
}

.map {
  width: 100%;
  height: 50vw;
  padding-top: 1vw;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    color-stop(30%, #bbb)
  );
  background: linear-gradient(#fff, #bbb 30%);
  padding-bottom: 1vw;
}

.map_title {
  margin-left: calc((100% - (10vh + 10vw)) / 2);
  height: calc(2.1vh + 2.1vw);
  width: calc(10vh + 10vw);
  padding: 10px;
  font-size: calc(2vh + 2vw);
  text-align: center;
  line-height: calc(2.3vh + 2.3vw);
  background-color: white;
  border-top: 8px #cdf solid;
  border-bottom: 8px #cdf solid;
}

.google {
  margin-top: 2vw;
  margin-left: 20%;
  width: 60%;
  height: 80%;
}

.biostei-baloon {
  width: calc(10vh + 10vw);
}

.footer {
  position: relative;
  margin-top: 0vw;
  margin-bottom: 0;
  width: 100%;
  height: calc(70px + 3vw);
  background-color: #8cc63f;
}

.footer_biostei {
  position: absolute;
  top: calc(4vh - 2vw);
  left: 3vw;
  width: calc(20vh + 20vw);
}

.jusho {
  position: absolute;
  top: 10px;
  left: 50%;
  font-size: calc(1.2vh + 1.2vw);
}

.telfax {
  position: absolute;
  top: 60px;
  left: 50%;
  font-size: calc(1.2vh + 1.2vw);
}

.SP {
  display: none;
}

@media screen and (max-width: 480px) {
  /*SSSSSSSSSSSSSSSSSSSS*/
  .loading {
    position: fixed;
    top: 32vh;
    left: 18vw;
  }
  div {
    font-size: 18px;
  }
  .top {
    /*スマホではこれを付けないと、動画だけ左隅いっぱいになり、他は少し隙間が空きます*/
    overflow: hidden;
  }
  /*.eigyo {
        top: calc(65vh + 10vw);
        right: 10vw;
        width: calc(17vh + 17vw);
        height: calc(6vh + 6vw);
        font-size: calc(0.24vh + 2.3vw);
        line-height: calc(0.9vh + 4vw);
    }*/
  .content {
    margin: 0;
    margin-top: 5vw;
    position: relative;
    width: 100%;
  }
  .policy {
    left: calc((100vw - 28vh - 38vw) / 2);
    width: calc(28vh + 38vw);
    height: calc(4vh + 4vw);
  }
  .catch {
    left: 5vw;
    width: calc(30vh + 30vw);
    height: calc(5vh + 8vw);
  }
  .yasai_wrap {
    top: 45vw;
  }
  .tenpo {
    margin-top: 2vw;
  }
  .riyouhou_wrap {
    height: auto;
  }
  .riyouhou {
    margin-left: 5%;
    width: 90%;
    height: auto;
    border: 4px #cdf dotted;
    border-radius: 10px;
    padding: 5vw;
    font-size: calc(0.9vh + 2.7vw);
    line-height: calc(2vh + 2vw);
  }
  .hosoku {
    width: 100%;
    height: 90vw;
    -webkit-box-pack: none;
    -ms-flex-pack: none;
    justify-content: none;
    line-height: 5vw;
  }
  .hosoku_a {
    display: block;
    margin-left: 3%;
    width: 94%;
    height: 15vw;
    text-decoration: none;
  }
  .hosoku_box {
    margin: 2%;
    width: 96%;
    height: 16vh;
  }
  .hosoku_box div {
    font-size: calc(0.4vh + 2.6vw);
  }
  .p2 {
    font-size: calc(2vh + 2vw);
  }
  .hosoku_box div.p3 {
    font-size: calc(1.6vh + 1.6vw);
  }
  .p4 {
    font-size: calc(2.2vh + 2.2vw);
  }
  .p5 {
    font-size: calc(2.2vh + 2.2vw);
  }
  .arrow::before {
    width: 6px;
    height: 6px;
    border-top: solid 2px white;
    border-right: solid 2px white;
  }
  .obi {
    /*スマホでは色付き。PCでは、色をつけると「医食同源」などの文字が消えるため、透明にしています。*/
    background-color: #f1f3fe;
    height: auto;
    padding-bottom: 10vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .menubox {
    width: 100%;
    height: auto;
  }
  .chumonbox {
    width: 100%;
    height: 150px;
  }
  .monthly_menu_box {
    margin-top: calc(2vh + 2vw);
    font-size: calc(2vh + 2vw);
    width: 80%;
  }
  .menumonth {
    font-size: calc(4vh + 5vw);
  }
  .chumon {
    margin-top: 5vw;
    margin-left: 10%;
    width: 80%;
  }
  .edit {
    margin-top: 5vw;
    margin-left: 10%;
    width: 80%;
  }
  .menutable0,
  .menutable1 {
    margin: 40px 1%;
    width: 98%;
    height: 120vw;
    border-collapse: collapse;
    border: 3px #c1e588 doiuble;
    background-color: white;
    table-layout: fixed;
  }
  th,
  td {
    border: 1px #347 solid;
    height: 1.8vw;
    font-size: calc(1.2vh + 1.2vw);
  }
  .date,
  .youbi {
    width: 6%;
  }
  .submenu {
    width: 22%;
  }
  .map {
    margin-top: 2vw;
    height: 90vw;
  }
  .google {
    margin-left: 2%;
    width: 96%;
    height: 70%;
  }
  .footer_biostei {
    left: 3vw;
    width: 40vw;
  }
  .PC {
    display: none;
  }
  
  .SP {
    display: block;
  }
}

/*# sourceMappingURL=top_style.css.map */