@charset "UTF-8";

.top_intro_section {
  position: relative;
  padding-right: calc((100 / var(--view-size)) * 288 * 1vw);
  background-image: url(../../../uploads/img/mv-bg-r.png), url(../../../uploads/img/mv-bg-w.png), url(../../../uploads/img/mv-bg-b.png), url(../../../uploads/img/mv-bg-g.png), url(../../../uploads/img/mv-bg-w.png);
  background-size: calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw);
  background-position: top calc((100 / var(--view-size)) * 25 * 1vw) left calc((100 / var(--view-size)) * -101 * 1vw), top calc((100 / var(--view-size)) * -101 * 1vw) left calc((100 / var(--view-size)) * 674 * 1vw), top calc((100 / var(--view-size)) * 156 * 1vw) left calc((100 / var(--view-size)) * 602 * 1vw), top calc((100 / var(--view-size)) * 358 * 1vw) left calc((100 / var(--view-size)) * 908 * 1vw), top calc((100 / var(--view-size)) * 592 * 1vw) left calc((100 / var(--view-size)) * 14 * 1vw);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
.top_intro_section::before {
  content: "台湾";
  position: absolute;
  top: calc((100 / var(--view-size)) * 386 * 1vw);
  left: calc((100 / var(--view-size)) * 546 * 1vw);
  font-size: calc((100 / var(--view-size)) * 360 * 1vw);
  line-height: 1.19986;
  color: #FCFCFC;
}
.top_intro_content {
  display: flex;
  padding: calc((100 / var(--view-size)) * 105 * 1vw) 0 calc((100 / var(--view-size)) * 111 * 1vw);
}
.top_intro_left {
  position: relative;
  width: calc((100 / var(--view-size)) * 576 * 1vw);
  margin-left: auto;
  padding: calc((100 / var(--view-size)) * 30 * 1vw) calc((100 / var(--view-size)) * 45 * 1vw) calc((100 / var(--view-size)) * 30 * 1vw);
  background-color: #fff;
  border-radius: calc((100 / var(--view-size)) * 5 * 1vw);
  border: calc((100 / var(--view-size)) * 2 * 1vw) solid #000;
  box-shadow: calc((100 / var(--view-size)) * -4 * 1vw) calc((100 / var(--view-size)) * 6 * 1vw) 0 0 #000;
}
.top_intro_copy {
  position: absolute;
  top: 0;
  left: calc((100 / var(--view-size)) * -45 * 1vw);
  font-size: calc((100 / var(--view-size)) * 28 * 1vw);
  line-height: 1;
  font-weight: 700;
  background-color: #fff;
  padding: calc((100 / var(--view-size)) * 22 * 1vw);
  border-radius: calc((100 / var(--view-size)) * 5 * 1vw);
  border: calc((100 / var(--view-size)) * 2 * 1vw) solid #000;
  display: inline-block;
  transform: rotate(-11.67deg);
  z-index: 9999;
}
.top_intro_left_slide {
  position: relative;
  height:calc((100 / var(--view-size)) * 404 * 1vw);
}
.top_intro_left_slide li, .top_intro_left_slide img {
  width: 100%;
}
.top_intro_left_slide .slick-list, .top_intro_left_slide .slick-track, .top_intro_left_slide li, .top_intro_left_slide img {
  height: 100%;
}
.top_intro_left_slideText {
  text-align: right;
  padding: calc((100 / var(--view-size)) * 18 * 1vw) 0;
  z-index: 9;
}
.top_intro_left_slideText li {
  font-size: calc((100 / var(--view-size)) * 60 * 1vw);
  font-weight: 700;
  color: #000;
}
.top_intro_right {
  width: calc(100% - ((100 / var(--view-size)) * 688 * 1vw));
}
.top_intro_right_slide {
  width: calc((100 / var(--view-size)) * 410 * 1vw);
  margin: calc((100 / var(--view-size)) * 200 * 1vw) auto 0;
  background-color: #fff;
  padding: calc((100 / var(--view-size)) * 16 * 1vw) calc((100 / var(--view-size)) * 24 * 1vw);
  color: #191919;
}
.top_intro_right_slide h2 {
  margin-bottom: calc((100 / var(--view-size)) * 12 * 1vw);
}
.top_intro_right_slide span {
  display: block;
  text-align: center;
  margin-top: calc((100 / var(--view-size)) * 12 * 1vw);
}
.top_intro_right_slide span a {
  display: inline-block;
  border-radius: calc((100 / var(--view-size)) * 12 * 1vw);
  padding: calc((100 / var(--view-size)) * 4 * 1vw) calc((100 / var(--view-size)) * 8 * 1vw);
  border: solid 1px #000;
  font-weight: 700;
}
.top_intro_right_slide span a:hover {
  opacity: .5;
}
@media (max-width: 670px) {
  .top_intro_section {
    padding-right: 0;
    background-image: url(../../../uploads/img/mv-bg-r.png), url(../../../uploads/img/mv-bg-w.png), url(../../../uploads/img/mv-bg-b.png), url(../../../uploads/img/mv-bg-g.png), url(../../../uploads/img/mv-bg-w.png);
    background-size: calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw);
    background-position: top calc((100 / var(--view-size)) * 25 * 1vw) left calc((100 / var(--view-size)) * -101 * 1vw), top calc((100 / var(--view-size)) * -101 * 1vw) left calc((100 / var(--view-size)) * 674 * 1vw), top calc((100 / var(--view-size)) * 156 * 1vw) left calc((100 / var(--view-size)) * 602 * 1vw), top calc((100 / var(--view-size)) * 358 * 1vw) left calc((100 / var(--view-size)) * 908 * 1vw), top calc((100 / var(--view-size)) * 592 * 1vw) left calc((100 / var(--view-size)) * 14 * 1vw);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }
  .top_intro_section::before {
    display: none;
  }
  .top_intro_content {
    display: block;
    padding: calc((100 / var(--view-size)) * 40 * 1vw) 0 calc((100 / var(--view-size)) * 30 * 1vw);
  }
  .top_intro_left {
    width: 90%;
    padding: calc((100 / var(--view-size)) * 30 * 1vw) calc((100 / var(--view-size)) * 25 * 1vw) calc((100 / var(--view-size)) * 20 * 1vw);
    margin: 0 auto;
  }
  .top_intro_copy {
    left: calc((100 / var(--view-size)) * -15 * 1vw);
    padding: calc((100 / var(--view-size)) * 10 * 1vw);
  }
  .top_intro_left_slide {
    height:calc((100 / var(--view-size)) * 304 * 1vw);
  }
  .top_intro_left_slideText {
    padding: calc((100 / var(--view-size)) * 2 * 1vw) 0;
  }
  .top_intro_left_slideText li {
    font-size: calc((100 / var(--view-size)) * 50 * 1vw);
  }
  .top_intro_right {
    width: 100%;
  }
  .top_intro_right_slide {
    width: 90%;
    margin: calc((100 / var(--view-size)) * 40 * 1vw) auto 0;
  }
}

.top_about_section {
  position: relative;
  padding-right: calc((100 / var(--view-size)) * 288 * 1vw);
}
.top_about_inner {
  padding: calc((100 / var(--view-size)) * 60 * 1vw) 0;
  background-color: #C7F5FF;
  background-image: url(../../../uploads/img/mv-bg-w.png), url(../../../uploads/img/mv-bg-w.png), url(../../../uploads/img/mv-bg-w.png);
  background-size: calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw);
  background-position: top calc((100 / var(--view-size)) * 400 * 1vw) left calc((100 / var(--view-size)) * -101 * 1vw), top calc((100 / var(--view-size)) * 30 * 1vw) left calc((100 / var(--view-size)) * 674 * 1vw), top calc((100 / var(--view-size)) * 360 * 1vw) left calc((100 / var(--view-size)) * 844 * 1vw);
  background-repeat: no-repeat, no-repeat, no-repeat;
  border-top: solid 2px #656565;
  border-bottom: solid 2px #656565;
}
.top_about_content {
  padding: 0 calc((100 / var(--view-size)) * 80 * 1vw);
}
.top_about_content_title {
  position: relative;
  padding-left: calc((100 / var(--view-size)) * 4 * 1vw);
  font-size: calc((100 / var(--view-size)) * 28 * 1vw);
  margin-bottom: calc((100 / var(--view-size)) * 40 * 1vw);
}
.top_about_content_title::before {
  content: "";
  position: absolute;
  top: calc(100% + ((100 / var(--view-size)) * 2 * 1vw));
  left: 0;
  width: calc((100 / var(--view-size)) * 175 * 1vw);
  height: calc((100 / var(--view-size)) * 14 * 1vw);
  background-image: url(../../../uploads/img/food-title-c.png);
  background-size: contain;
  background-repeat: repeat-x;
}
.top_about_content_text {
  font-size: calc((100 / var(--view-size)) * 20 * 1vw);
}
.top_about_content_ig {
  margin-top: calc((100 / var(--view-size)) * 40 * 1vw);
  padding: 0 calc((100 / var(--view-size)) * 100 * 1vw);
}

@media (max-width: 670px) {
  .top_about_section {
    padding-right: 0;
  }
  .top_about_inner {
    padding: calc((100 / var(--view-size)) * 40 * 1vw) 0;
  }
  .top_about_content {
    padding: 0 calc((20 / var(--view-size)) * 80 * 1vw);
  }
  .top_about_content_title {
    font-size: calc((100 / var(--view-size)) * 24 * 1vw);
  }
  .top_about_content_title::before {
    width: calc((100 / var(--view-size)) * 156 * 1vw);
  }
  .top_about_content_text {
    font-size: calc((100 / var(--view-size)) * 14 * 1vw);
  }
  .top_about_content_ig {
    margin-top: calc((100 / var(--view-size)) * 20 * 1vw);
    padding: 0 calc((100 / var(--view-size)) * 15 * 1vw);
  }
}

.top_ingredients_section {
  position: relative;
  padding-right: calc((100 / var(--view-size)) * 288 * 1vw);
}
.top_ingredients_inner {
  background-color: #E3FFE9;
  background-image: url(../../../uploads/img/mv-bg-w.png), url(../../../uploads/img/mv-bg-w.png), url(../../../uploads/img/mv-bg-w.png);
  background-size: calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw);
  background-position: top calc((100 / var(--view-size)) * 20 * 1vw) left calc((100 / var(--view-size)) * -40 * 1vw), top calc((100 / var(--view-size)) * 530 * 1vw) left calc((100 / var(--view-size)) * 374 * 1vw), top calc((100 / var(--view-size)) * 360 * 1vw) left calc((100 / var(--view-size)) * 844 * 1vw);
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.top_ingredients_content_wrap {
  border-bottom: solid 2px #656565;
  padding: calc((100 / var(--view-size)) * 60 * 1vw);
}
.top_ingredients_content_title {
  position: relative;
  text-align: right;
  padding-right: calc((100 / var(--view-size))* 4* 1vw);
  font-size: calc((100 / var(--view-size)) * 28 * 1vw);
  margin-bottom: calc((100 / var(--view-size))* 40* 1vw);
}
.top_ingredients_content_title::before {
  content: "";
  position: absolute;
  top: calc(100% + ((100 / var(--view-size)) * 2 * 1vw));
  right: 0;
  width: calc((100 / var(--view-size)) * 140 * 1vw);
  height: calc((100 / var(--view-size)) * 14 * 1vw);
  background-image: url(../../../uploads/img/food-title-c.png);
  background-size: contain;
  background-repeat: repeat-x;
}
.top_ingredients_content {
  margin-top: calc((100 / var(--view-size)) * 80 * 1vw);
  padding-bottom: calc((100 / var(--view-size)) * 40 * 1vw);
}
.top_ingredients_content_items {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc((100 / var(--view-size)) * 30 * 1vw);
  row-gap: calc((100 / var(--view-size)) * 80 * 1vw);
}
.top_ingredients_content_item {
  width: calc(100% / 3 - ((100 / var(--view-size)) * 60 * 1vw));
  background-color: #fff;
  border: solid 2px #656565;
}
.top_ingredients_content_item_img {
  overflow: hidden;
}
.top_ingredients_content_item_img img {
  aspect-ratio: 342/262;
  transition: transform .3s ease-in, -webkit-transform .3s ease-in;
}
.top_ingredients_content_item_link:hover .top_ingredients_content_item_img img {
  transform: scale(1.1);
}
.top_ingredients_content_item_body {
  border-top: solid 2px #656565;
  display: flex;
}
.top_ingredients_content_item_body_right {
  width: 100%;
  padding: calc((100 / var(--view-size)) * 12 * 1vw);
}
.top_ingredients_content_item_title {
  margin-top: calc((100 / var(--view-size)) * 6 * 1vw);
  font-weight: 700;
  font-size: calc((100 / var(--view-size)) * 24 * 1vw);
}
.top_ingredients_content_item_cat {
  margin-top: calc((100 / var(--view-size)) * 4 * 1vw);
}
.top_ingredients_content_item_cat a {
  transition: 0.3s;
}
.top_ingredients_content_item_cat a:hover {
  opacity: 0.7;
}
.top_ingredients_content_item_cat span {
  display: inline-block;
  margin-left: calc((100 / var(--view-size)) * 8 * 1vw);
  font-size: calc((100 / var(--view-size)) * 14 * 1vw);
}
.top_ingredients_content_item_cat span:first-child {
  margin-left: 0;
}
.top_ingredients_content_link {
  margin-top: calc((100 / var(--view-size)) * 60 * 1vw);
  text-align: right;
}
.top_ingredients_content_link a {
  display: inline-block;
  border-radius: calc((100 / var(--view-size)) * 16 * 1vw);
  padding: calc((100 / var(--view-size)) * 6 * 1vw) calc((100 / var(--view-size)) * 20 * 1vw);
  border: solid 1px #656565;
  font-weight: 700;
  font-size: calc((100 / var(--view-size)) * 20 * 1vw);
}
.top_ingredients_content_link a:hover {
  background-color: #656565;
  color: #fff;
}
@media (max-width: 670px) {
  .top_ingredients_section {
    padding-right: 0;
  }
  .top_ingredients_content_wrap {
    padding: calc((100 / var(--view-size)) * 40 * 1vw) calc((100 / var(--view-size)) * 20 * 1vw);
  }
  .top_ingredients_content_title::before {
    width: calc((100 / var(--view-size)) * 156 * 1vw);
  }
  .top_ingredients_content {
    margin-top: calc((100 / var(--view-size)) * 60 * 1vw);
  }
  .top_ingredients_content_items {
    display: block;
  }
  .top_ingredients_content_item {
    width: 100%;
    margin-top: calc((100 / var(--view-size)) * 20 * 1vw);
  }
  .top_ingredients_content_item:first-child {
    margin-top: 0;
  }
  .top_ingredients_content_item_body_left {
    width: calc((100 / var(--view-size)) * 58 * 1vw);
  }
  .top_ingredients_content_item_key {
    font-size: calc((100 / var(--view-size)) * 48 * 1vw);
    line-height: calc((100 / var(--view-size)) * 48 * 1vw);
  }
  .top_ingredients_content_item_body_right {
    width: calc(100% - ((100 / var(--view-size)) * 58 * 1vw));
    padding: calc((100 / var(--view-size)) * 10 * 1vw) calc((100 / var(--view-size)) * 6 * 1vw);
  }
  .top_ingredients_content_item_copy {
    font-size: calc((100 / var(--view-size)) * 14 * 1vw);
  }
  .top_ingredients_content_item_title {
    font-size: calc((100 / var(--view-size)) * 18 * 1vw);
  }
  .top_ingredients_content_item_cat {
    margin-top: calc((100 / var(--view-size)) * 1 * 1vw);
  }
  .top_ingredients_content_item_time {
    margin-top: calc((100 / var(--view-size)) * 2 * 1vw);
    display: block;
    text-align: right;
    font-size: calc((100 / var(--view-size)) * 12 * 1vw);
  }
  .top_ingredients_content_link {
    margin-top: calc((100 / var(--view-size)) * 40 * 1vw);
    text-align: right;
  }
}


.top_note_section {
  position: relative;
  padding-right: calc((100 / var(--view-size)) * 288 * 1vw);
}
.top_note_inner {
  background-color: #FFE6E0;
  background-image: url(../../../uploads/img/mv-bg-w.png), url(../../../uploads/img/mv-bg-w.png), url(../../../uploads/img/mv-bg-w.png);
  background-size: calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw), calc((100 / var(--view-size)) * 266 * 1vw) calc((100 / var(--view-size)) * 198 * 1vw);
  background-position: top calc((100 / var(--view-size)) * 20 * 1vw) left calc((100 / var(--view-size)) * -40 * 1vw), top calc((100 / var(--view-size)) * 530 * 1vw) left calc((100 / var(--view-size)) * 374 * 1vw), top calc((100 / var(--view-size)) * 360 * 1vw) left calc((100 / var(--view-size)) * 844 * 1vw);
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.top_note_content_wrap {
  border-bottom: solid 2px #656565;
  padding: calc((100 / var(--view-size)) * 60 * 1vw);
}
.top_note_content_title {
  position: relative;
  text-align: left;
  padding-right: calc((100 / var(--view-size))* 4* 1vw);
  font-size: calc((100 / var(--view-size)) * 28 * 1vw);
  margin-bottom: calc((100 / var(--view-size))* 40* 1vw);
}
.top_note_content_title::before {
  content: "";
  position: absolute;
  top: calc(100% + ((100 / var(--view-size)) * 2 * 1vw));
  left: 0;
  width: calc((100 / var(--view-size)) * 60 * 1vw);
  height: calc((100 / var(--view-size)) * 10 * 1vw);
  background-image: url(../../../uploads/img/food-title-c.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.top_note_content {
  margin-top: calc((100 / var(--view-size)) * 80 * 1vw);
  padding-bottom: calc((100 / var(--view-size)) * 40 * 1vw);
}
@media (max-width: 670px) {
  .top_note_section {
    padding-right: 0;
  }
  .top_note_content_wrap {
    padding: calc((100 / var(--view-size)) * 40 * 1vw) calc((100 / var(--view-size)) * 20 * 1vw);
  }
  .top_note_content_title::before {
    width: calc((100 / var(--view-size)) * 86 * 1vw);
  }
  .top_note_content {
    margin-top: calc((100 / var(--view-size)) * 60 * 1vw);
  }
}