@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Noto+Serif+TC:wght@400;700&display=swap');

:root {
  --deep-bice: #2a343d;
  --deep-gray: #545351;
  --deep-hyacinth: #b43434;
  --hyacinth: #ea6761;
  --cremaRose: #c87072;
  --brown: #a77c59;
  --light-brown: #ce9567;
  --beige: #d8c7bb;
  --dark: #232323;
  --gray: #9f9f9f;
  --white: #ededed;
}

/* BS5修改預設 */
html,
body {
  overflow-x: hidden;
  margin: 0%;
}

html {
  height: 100%;
}

html,
body {
  /* background-color: #d8d8d8; */
  font-family: 'Noto Serif TC', '黑體-繁', '微軟正黑體', 'cursive';
  line-height: 1.75;
  letter-spacing: 1.5px;
  background-color: #f8f8f8;
  font-weight: 400;
  background: url('../../img/all-bg.jpg?v=1');
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: 'Cinzel Decorative', 'Noto Serif TC', '黑體-繁', '微軟正黑體',
    'cursive';
  letter-spacing: 7px;
  color: var(--dark);
}

.fs-1,
.fs-2,
.fs-3,
.fs-4,
.fs-5,
.fs-6 {
  font-weight: 900;
  font-family: 'Cinzel Decorative', 'Noto Serif TC', '黑體-繁', '微軟正黑體',
    'cursive';
  letter-spacing: 7px;
}

@media (max-width: 412px) {
  .fs-1 {
    font-size: 1.5rem !important;
  }
}

.fs-5:after {
  content: '';
  background: var(--deep-hyacinth);
  width: 5vw;
  height: 1.5px;
  top: 15px;
  left: 6.5rem;
  position: absolute;
}

.Cinzel {
  font-family: 'Cinzel Decorative', 'Noto Serif TC', '黑體-繁', '微軟正黑體',
    'cursive';
}

.hideme {
  opacity: 0;
}

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
  width: 10px;
}

/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
  background: var(--white);
}

/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
  background: var(--beige);
}

/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
  background: var(--light-brown);
}

/* 反選字顏色 */
::-moz-selection {
  /* Code for Firefox */
  color: var(--white);
  background: var(--cremaRose);
}

::selection {
  color: var(--white);
  background: var(--cremaRose);
}

.bg-beige {
  background: var(--beige);
  color: var(--dark);
}

.bg-deep-bice {
  background: var(--deep-bice);
  color: var(--white);
}

.text-deep-bice {
  color: var(--deep-bice);
}

.text-deep-hyacinth {
  color: var(--deep-hyacinth);
}

.text-hyacinth {
  color: var(--hyacinth);
}

.text-light-brown {
  color: var(--light-brown);
}

.text-brown {
  color: var(--brown);
}

.text-beige {
  color: var(--beige);
}

.uppercase {
  text-transform: uppercase !important;
}

/* top buttom start */
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 3vw;
  z-index: 999;
  font-size: 18px;
  border: none;
  outline: none;
  color: var(--cremaRose);
  background-color: transparent;
  cursor: pointer;
  padding: 5px 15px;
  border-radius: 0px;
  font-weight: 900;
}

#topBtn span {
  writing-mode: vertical-lr;
  text-orientation: sideways-right;
}

#topBtn:hover {
  color: var(--cremaRose);
  background-color: transparent;
  font-weight: 900;
}
/* top buttom end */

/* navbar start */

.navbar-expand-md .navbar-nav .nav-link {
  margin-right: 2vw;
  margin-left: 2vw;
  padding-right: 1vw;
  padding-left: 1vw;
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width: 767.9px) {
  .navbar-expand-md .navbar-nav .nav-link {
    margin-top: 2vw;
    margin-bottom: 2vw;
  }
}

.navbar-nav .nav-link.active {
  background-color: var(--hyacinth) !important;
  color: var(--deep-bice) !important;
}

.navbar-nav li a {
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--white) !important;
}

.navbar-nav li a span {
  position: relative;
}

.navbar-nav li a span:before {
  position: absolute;
  width: 40px;
  height: 40px;
  content: '';
  left: -30%;
  top: 0px;
  background-image: url('../../img/li-icon.png');
  background-repeat: no-repeat;
  background-size: contain;
  border: 0px;
  transition: all 0.5s ease;
}

/* .toggle-btn::before {
  content: 'MENU';
  position: absolute;
  width: 70px;
  letter-spacing: 2px;
  color: var(--white);
  right: 30px;
  font-weight: 900;
} */

.one {
  display: block;
  position: relative;
  width: 25px;
  height: 2px;
  background: var(--white);
  visibility: inherit;
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.active .one {
  display: block;
  position: relative;
  width: 25px;
  height: 2px;
  background: var(--white);
  visibility: hidden;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 9);
}

.two {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--white);
  margin-top: 4px;
}

.tre {
  display: block;
  position: relative;
  width: 21px;
  height: 2px;
  background: var(--white);
  margin-top: 4px;
  visibility: inherit;
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.active .tre {
  display: block;
  position: relative;
  width: 21px;
  height: 2px;
  background: var(--white);
  margin-top: 4px;
  visibility: hidden;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 9);
}

/* navbar end */

/* header start */
.header-banner {
  position: relative;
}

#headerBottom {
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 103vw;
  /* min-height: 15vh; */
  object-fit: cover;
  object-position: center center;
  z-index: 10;
}

.header-banner .next {
  position: absolute;
  width: 20px;
  height: auto;
  bottom: 7%;
  right: 1vw;
  z-index: 11;
  -webkit-animation: finger 3s infinite;
  animation: finger 3s infinite;
}

@-webkit-keyframes finger {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

/* header end */

/* swiper 滑動 start */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--beige);
}

.headerSwiper {
  width: 100vw;
  height: 100vh;
}

.headerSwiper .swiper-slide img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
}

.headerSwiper .swiper-pagination {
  right: 1.5vw !important;
}

.headerSwiper .swiper-pagination-bullet {
  background: var(--beige);
  color: var(--deep-bice);
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}

.swiper.menuSwiperTop {
  width: 100%;
  height: auto;
}

.menuSwiperTop {
  width: 100%;
  height: 80%;
}

.menuSwiperBottom {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.menuSwiperBottom .swiper-slide {
  opacity: 0.4;
}

.menuSwiperBottom .swiper-slide-thumb-active {
  opacity: 1;
}

.menuSwiperTop .swiper-slide img,
.menuSwiperBottom .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center;
  aspect-ratio: 2/1;
}

.vertical-rl {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* swiper 滑動 end */

/* menu start */

#menu {
  background: url('../../img/menubg.png');
}

@media (min-width: 992px) {
  #menu .title {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

/* menu end */

/* describe start */
#describe {
  position: relative;
}

@media (max-width: 1500px) {
  #describe img {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    aspect-ratio: 3/1;
  }

  #describe .left {
    object-position: center bottom !important;
    width: 116%;
    left: -8%;
    position: relative;
  }

  #describe .right {
    object-position: center top !important;
    width: 116%;
    left: -8%;
    position: relative;
  }
}

@media (min-width: 1500px) {
  #describe img {
    height: 80%;
    width: auto;
  }

  #describe .left {
    position: absolute;
    left: -15%;
    top: 10%;
    z-index: 1;
  }

  #describe .right {
    position: absolute;
    right: -15%;
    top: 10%;
    z-index: 1;
  }
}

/* describe end */

/* only the best start */
.ramen-top {
  position: relative;
  z-index: 2;
  width: 75% !important;
  max-width: 600px;
}

.noodel-box {
  position: relative;
}

.noodle {
  position: relative;
  z-index: 1;
  width: 75% !important;
  max-width: 600px;
  margin-top: -5%;
  margin-right: auto !important;
  margin-left: auto !important;
}

.noodel-content {
  margin-top: -5%;
  background: url('../../img/noodle.svg?=1');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 30% auto;
}

.modal-content {
  border-radius: 0 !important;
}

.modal-header {
  border-bottom: 0 !important;
}
/* only the best end */

/* 燈籠 start */

@media (min-width: 767.9px) {
  /* 燈籠中間米色區域 */
  .lantern-light {
    position: relative;
    width: 55px;
    height: 65px;
    background-image: linear-gradient(
        0deg,
        #2a343d 60%,
        #fff 10%,
        rgba(42, 52, 61, 0.8) 5%
      ),
      linear-gradient(90deg, #90847c 0%, #2a343d 30% 50%, #90847c 70% 100%);
    background-size: 100% 6px;
    margin: 5px;
    border-radius: 30%;
    border: var(--beige) solid 1px;
    /* box-shadow: -5px 5px 30px 4px #90847c; */
  }
  .lantern-light:hover {
    transform-origin: top center;
    animation: swing 3s infinite ease-in-out;
  }

  /* 燈籠搖晃效果 */
  @keyframes swing {
    0% {
      transform: rotate(-5deg);
      box-shadow: -5px 5px 15px 4px #afa69f;
    }
    50% {
      transform: rotate(5deg);
      box-shadow: -5px 5px 35px 4px #afa69f;
    }
    100% {
      transform: rotate(-5deg);
      box-shadow: -5px 5px 15px 4px #afa69f;
    }
  }

  /* 燈籠上方線 */
  .lantern-light::before,
  .lantern-light::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 6px;
    background: linear-gradient(
      to right,
      #a89f98,
      #cfc1b6,
      #d6c1b2,
      #cfc1b6,
      #a89f98
    );

    left: 14px;
  }

  .lantern-line {
    width: 1px;
    height: 7px;
    background-color: var(--beige);
    position: absolute;
    left: 26px;
    top: -19px;
  }

  /* 燈籠頂部和底部 */
  /* 頂部位置 */
  .lantern-light::before {
    top: -10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  /* 底部位置 */

  .lantern-light::after {
    bottom: -10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .lantern-text-box {
    margin-top: 4px;
  }

  .lantern-text {
    font-weight: 400;
    letter-spacing: 4px;
    color: var(--white);
  }
}
/* 燈籠 end */