/******************************************
*
*	include compass css3 library
*
*******************************************/
/******************************************
*
*	include global styles
*
*******************************************/
/* **************************
 *
 *	Variable
 *
 * ************************** */
/*== Color ==*/
/*== Font ==*/
/*== Screen Size ==*/
/*== Layouts ==*/
/******************************************
*
*  Custom mixin
*
******************************************/
/******************************************
*
*  Global Style Setting
*
******************************************/
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+TC:wght@100;400;500;700;900&display=swap");
/* line 12, barlost/sass/_global.scss */
* {
  margin: 0;
}

/* line 15, barlost/sass/_global.scss */
html, body {
  height: 100%;
  font-family: 'Lato','Noto Sans TC', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #999999;
  background: #222222;
}
@media screen and (min-width: 992px) {
  /* line 15, barlost/sass/_global.scss */
  html, body {
    font-size: 16px;
  }
}

/* line 28, barlost/sass/_global.scss */
body {
  overflow-x: hidden;
}

/*== sticky footer ==*/
/* line 33, barlost/sass/_global.scss */
.body-wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
}

/* line 39, barlost/sass/_global.scss */
.push {
  height: 60px;
}

/* fixed header: */
/* line 43, barlost/sass/_global.scss */
.content-wrapper {
  padding-top: 70px;
  /* header height */
}

/*== Typography ==*/
/* line 49, barlost/sass/_global.scss */
h1, h2, h3, h4, h5, h6 {
  clear: both;
  margin-top: 0;
  font-weight: normal;
  line-height: 1.25;
  font-weight: bold;
}

/* line 56, barlost/sass/_global.scss */
h1 {
  font-size: 2.375rem;
  /* 38px */
}

/* line 59, barlost/sass/_global.scss */
h2 {
  font-size: 2.125rem;
  /* 34px */
}

/* line 62, barlost/sass/_global.scss */
h3 {
  font-size: 1.875rem;
  /* 30px */
}

/* line 65, barlost/sass/_global.scss */
h4 {
  font-size: 1.5rem;
  /* 24px */
}

/* line 68, barlost/sass/_global.scss */
h5 {
  font-size: 1.25rem;
  /* 20px */
}

/* line 71, barlost/sass/_global.scss */
h6 {
  font-size: 1.25rem;
  /* 20px */
  font-weight: normal;
}

/* line 76, barlost/sass/_global.scss */
p {
  font-size: 1.25rem;
  /* 20px */
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* line 82, barlost/sass/_global.scss */
figure {
  margin: 1em 0;
  /* Extra wide images within figure tags don't overflow the content area. */
}

/* line 87, barlost/sass/_global.scss */
table {
  margin: 0 0 1.5em;
  width: 100%;
}

/*== Link ==*/
/* line 94, barlost/sass/_global.scss */
a {
  color: #2ca2be;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
/* line 97, barlost/sass/_global.scss */
a:hover, a:focus, a:active {
  color: #2ca2be;
  text-decoration: none;
  outline: 0;
  transition-duration: 0.3s;
}
/* line 103, barlost/sass/_global.scss */
a:hover {
  opacity: 0.95;
  transition-duration: 0.3s;
}
/* line 113, barlost/sass/_global.scss */
a:focus {
  outline: 0;
}

/* line 118, barlost/sass/_global.scss */
ul {
  list-style: none;
}

/* line 122, barlost/sass/_global.scss */
a:focus, button:focus, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active, .btn:focus {
  outline: none;
  box-shadow: none;
  text-decoration: none;
}

/* line 127, barlost/sass/_global.scss */
img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}

/* line 134, barlost/sass/_global.scss */
*:focus {
  outline: none;
}

/* ====================
 * Button
 * ==================== */
/* ====================
 * Text style
 * ==================== */
/* ====================
 *	Breadcrumb
 * ==================== */
/* ====================
 *	element
 * ==================== */
/* line 29, barlost/sass/_component.scss */
.block {
  padding: 30px 0;
  text-align: center;
}
@media screen and (min-width: 992px) {
  /* line 29, barlost/sass/_component.scss */
  .block {
    padding: 80px 0;
  }
}
/* line 35, barlost/sass/_component.scss */
.block .block-title {
  font-size: 2rem;
  color: #2ca2be;
  margin-bottom: 30px;
  font-weight: bold;
}
@media screen and (min-width: 992px) {
  /* line 35, barlost/sass/_component.scss */
  .block .block-title {
    margin-bottom: 50px;
  }
}

/******************************************
*
*	include partials
*
*******************************************/
/* ====================
 *	Header
 * ==================== */
/* line 7, barlost/sass/_layout.scss */
#menuTab .nav-item .nav-link {
  color: #ffffff;
}
/* line 9, barlost/sass/_layout.scss */
#menuTab .nav-item .nav-link.active {
  color: #535353;
}

/* line 16, barlost/sass/_layout.scss */
.menu-header {
  color: #ffffff;
}

/* line 20, barlost/sass/_layout.scss */
.navbar-toggler {
  width: 50px;
  padding: 0 0 5px;
  height: 50px;
}
/* line 25, barlost/sass/_layout.scss */
.navbar-toggler:focus {
  box-shadow: none;
}
/* line 28, barlost/sass/_layout.scss */
.navbar-toggler .navbar-toggler-icon {
  width: 30px;
  height: 3px;
  background: transparent;
  position: relative;
}
/* line 33, barlost/sass/_layout.scss */
.navbar-toggler .navbar-toggler-icon:before, .navbar-toggler .navbar-toggler-icon:after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  background: #2ca2be;
  position: absolute;
  top: -10px;
  transition-duration: 0.1s;
  transform: rotate(45deg) translate(7px, 7px);
  transition-duration: 0.3s;
}
/* line 45, barlost/sass/_layout.scss */
.navbar-toggler .navbar-toggler-icon:after {
  top: 10px;
  transform: rotate(-45deg) translate(7px, -7px);
  transition-duration: 0.1s;
}
/* line 53, barlost/sass/_layout.scss */
.navbar-toggler.collapsed .navbar-toggler-icon {
  background: #2ca2be;
}
/* line 55, barlost/sass/_layout.scss */
.navbar-toggler.collapsed .navbar-toggler-icon:before {
  transform: initial;
  transition-duration: 0.3s;
}
/* line 59, barlost/sass/_layout.scss */
.navbar-toggler.collapsed .navbar-toggler-icon:after {
  transform: initial;
  transition-duration: 0.3s;
}

/* line 141, barlost/sass/_layout.scss */
#hero .hero-img-box .hero-img {
  height: 100%;
  width: auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  min-height: 250px;
}
/* line 148, barlost/sass/_layout.scss */
#hero .hero-img-box .hero-img h1 {
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-size: 1.5rem;
  text-align: center;
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}
/* line 162, barlost/sass/_layout.scss */
#hero .hero-content-box {
  text-align: center;
}
/* line 165, barlost/sass/_layout.scss */
#hero .hero-content-box .navbar-brand {
  display: inline-block;
  margin: 2.5rem 0 0.5rem;
}
/* line 170, barlost/sass/_layout.scss */
#hero .hero-content-box .logo-wording {
  color: #a85d33;
  font-size: 48px;
  margin: 0;
}
/* line 175, barlost/sass/_layout.scss */
#hero .hero-content-box .title {
  color: #ffffff;
  font-size: 2.5rem;
  letter-spacing: 0.05em;
}
/* line 180, barlost/sass/_layout.scss */
#hero .hero-content-box .subtitle {
  color: #41464b;
  font-size: 1.45rem;
  font-weight: 400;
  margin-bottom: 2rem;
  letter-spacing: 0.03em;
}

/* line 192, barlost/sass/_layout.scss */
#service .column-left {
  position: relative;
  z-index: 0;
  text-align: center;
  color: #ffffff;
}
/* line 198, barlost/sass/_layout.scss */
#service .column-left .block-title {
  font-size: 2rem;
  margin: 5rem 0 1rem;
  font-weight: bold;
}
@media screen and (min-width: 992px) {
  /* line 198, barlost/sass/_layout.scss */
  #service .column-left .block-title {
    margin-top: 8rem;
    margin-bottom: 1rem;
  }
}
/* line 207, barlost/sass/_layout.scss */
#service .column-left .slogan {
  font-size: 1rem;
  margin-bottom: 5rem;
}
@media screen and (min-width: 992px) {
  /* line 207, barlost/sass/_layout.scss */
  #service .column-left .slogan {
    margin-bottom: 0;
  }
}
/* line 215, barlost/sass/_layout.scss */
#service .column-left:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  background: #a85d33;
  height: 100%;
  z-index: -1;
  width: calc(100% - 21px);
  left: 11px;
}
@media screen and (min-width: 768px) {
  /* line 215, barlost/sass/_layout.scss */
  #service .column-left:before {
    width: calc( 200% - 24px);
    left: 12px;
  }
}
/* line 231, barlost/sass/_layout.scss */
#service .column-right {
  position: relative;
  z-index: 0;
}
/* line 234, barlost/sass/_layout.scss */
#service .column-right .service-list {
  margin-bottom: 0;
  padding: 0;
}
@media screen and (min-width: 992px) {
  /* line 234, barlost/sass/_layout.scss */
  #service .column-right .service-list {
    margin-top: 3rem;
  }
}
/* line 240, barlost/sass/_layout.scss */
#service .column-right .service-list li {
  position: relative;
  color: #ffffff;
  padding: 5rem 3rem 3.5rem;
  text-align: center;
  background-size: cover;
  background-position: right;
}
@media screen and (min-width: 992px) {
  /* line 240, barlost/sass/_layout.scss */
  #service .column-right .service-list li {
    text-align: left;
  }
}
/* line 250, barlost/sass/_layout.scss */
#service .column-right .service-list li:before {
  content: "";
  display: block;
  background: #000000;
  position: absolute;
  opacity: 0.2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* line 260, barlost/sass/_layout.scss */
#service .column-right .service-list li h2 {
  margin-bottom: 1.5rem;
  position: relative;
  font-size: 2rem;
  color: #41464b;
}
/* line 266, barlost/sass/_layout.scss */
#service .column-right .service-list li p {
  font-size: 1rem;
  position: relative;
}

/* line 276, barlost/sass/_layout.scss */
#main-nav {
  position: relative;
  margin: 2rem 0;
}
@media screen and (min-width: 992px) {
  /* line 276, barlost/sass/_layout.scss */
  #main-nav {
    padding: 0 100px;
  }
  /* line 282, barlost/sass/_layout.scss */
  #main-nav:after {
    content: "";
    display: block;
    width: 500%;
    height: 60px;
    position: absolute;
    background: #ffffff;
    z-index: 0;
    right: calc( -500% + 100px);
    margin-left: -100px;
  }
}
/* line 295, barlost/sass/_layout.scss */
#main-nav #navbar-wrap {
  background: #ffffff;
  height: 60px;
  border-radius: 30px;
  width: 100%;
}
@media screen and (min-width: 992px) {
  /* line 295, barlost/sass/_layout.scss */
  #main-nav #navbar-wrap {
    border-radius: 30px 0 0 30px;
  }
}
/* line 303, barlost/sass/_layout.scss */
#main-nav #navbar-wrap .navbar-list {
  display: flex;
  padding: 0 2rem;
  margin: 0;
  height: 60px;
  align-items: center;
  justify-content: center;
}
/* line 312, barlost/sass/_layout.scss */
#main-nav #navbar-wrap .navbar-list .nav-item a {
  color: #41464b;
  font-size: 1rem;
  margin: 0 15px;
}
@media screen and (min-width: 992px) {
  /* line 312, barlost/sass/_layout.scss */
  #main-nav #navbar-wrap .navbar-list .nav-item a {
    padding: .5rem 0;
  }
}

/* line 325, barlost/sass/_layout.scss */
#contact {
  color: #ffffff;
}
/* line 327, barlost/sass/_layout.scss */
#contact .block-title {
  color: #ffffff;
}
/* line 330, barlost/sass/_layout.scss */
#contact .contact-wrap {
  background: #41464b;
}
/* line 332, barlost/sass/_layout.scss */
#contact .contact-wrap .contact-list {
  padding: 3rem 0;
  margin: 0;
  display: flex;
}
/* line 336, barlost/sass/_layout.scss */
#contact .contact-wrap .contact-list li {
  text-align: center;
  margin: 0 0 3rem;
}
/* line 349, barlost/sass/_layout.scss */
#contact .contact-wrap .contact-list li.email svg {
  margin-right: 1.5rem;
  margin-left: 0.5rem;
  width: 5rem;
}
/* line 360, barlost/sass/_layout.scss */
#contact .contact-wrap .contact-list li .item-wrap {
  display: flex;
}
/* line 364, barlost/sass/_layout.scss */
#contact .contact-wrap .contact-list li a {
  text-decoration: none;
  color: #ffffff;
}
/* line 369, barlost/sass/_layout.scss */
#contact .contact-wrap .contact-list li svg {
  width: 6rem;
  fill: #ffffff;
  display: inline-block;
  margin-right: 1rem;
}
/* line 376, barlost/sass/_layout.scss */
#contact .contact-wrap .contact-list li .text {
  color: #ffffff;
  display: block;
  margin: 0.6rem 0;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-align: left;
  word-break: break-word;
}
@media screen and (min-width: 1400px) {
  /* line 376, barlost/sass/_layout.scss */
  #contact .contact-wrap .contact-list li .text {
    margin: 2rem;
  }
}
@media screen and (min-width: 1200px) {
  /* line 388, barlost/sass/_layout.scss */
  #contact .contact-wrap .contact-list li .text span {
    display: block;
  }
}

/* line 400, barlost/sass/_layout.scss */
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
/* line 405, barlost/sass/_layout.scss */
footer p {
  color: #41464b;
  text-align: center;
  font-size: 1rem;
  margin: 1.5rem 0;
}
/* line 410, barlost/sass/_layout.scss */
footer p a {
  color: #41464b;
  text-decoration: none;
}
/* line 413, barlost/sass/_layout.scss */
footer p a:hover {
  opacity: 0.8;
  color: #41464b;
  transition-duration: 0.3s;
}

/* ====================
 * Go Top Button
 * ==================== */
/* line 425, barlost/sass/_layout.scss */
#gotop {
  display: block;
  overflow: hidden;
  visibility: hidden;
  position: absolute;
  position: fixed;
  z-index: -1;
  top: auto;
  right: 20px;
  bottom: 15%;
  left: auto;
  float: right;
  width: 3.5em;
  height: 3.375em;
  text-decoration: none;
  text-align: center;
  outline: none;
  color: #e2e2e2;
  font: normal normal normal 1em/1.5 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  outline: medium none currentcolor;
  touch-action: none;
  cursor: pointer;
  zoom: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  transform: translate(0, 0) scale(0.8);
  transition-property: opacity, transform;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* line 457, barlost/sass/_layout.scss */
#gotop.visible {
  display: inline-block;
  z-index: 1000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* line 1, barlost/sass/_index.scss */
html {
  overflow: hidden;
}

/* line 5, barlost/sass/_index.scss */
body {
  background-image: url("img/barlost-bg-top.png");
  background-attachment: fixed;
  background-size: cover;
  background-position: top left;
}

/* line 13, barlost/sass/_index.scss */
#menuTab .en-name {
  display: block;
}

/* line 20, barlost/sass/_index.scss */
.tab-pane ul li {
  clear: both;
  position: relative;
}
/* line 23, barlost/sass/_index.scss */
.tab-pane ul li .list-name {
  width: calc(100% - 50px);
}
/* line 31, barlost/sass/_index.scss */
.tab-pane#notice-tab-pane ul {
  list-style: disc;
}

/* line 37, barlost/sass/_index.scss */
.en-name {
  font-size: 0.5em;
  opacity: 0.8;
  margin: 0 5px;
  font-style: italic;
}

/* line 43, barlost/sass/_index.scss */
.recipe {
  display: block;
  font-size: 0.5em;
  opacity: 0.5;
  margin-bottom: 10px;
}

/* line 50, barlost/sass/_index.scss */
.price {
  color: #acacac;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  text-align: right;
}

/******************************************
*
*	structure notes
*
*******************************************/
/*
	z-index:


*/