:root {
  --primary: #ff8989;
  --light: #ffb469;
  --dark: #5f3a16;
  --white: #fff7f7;
}

* {
  font-family: '微軟正黑體';
  line-height: 1.7;

}

/* @media (max-width: 1200px) {
  #scene {
    display: none;
  }
} */

@media (max-width: 1200px) {
  #scene {
    display: none;
  }
  
}


.text-primary {
  color: var(--primary) !important;
  font-weight: bolder;
}

body {
  background-color: var(--primary);
}

.navbar {
  backdrop-filter: blur(20px);
  border-radius: 0px 0px 50px 50px;
  /* 設透明 */
}

.navbar-nav {
  font-size: 1.2rem;
}

.nav-item {
  font-size: 1.2rem;
}

.navbar .navbar-nav .nav-link {
  padding: 20px 15px;
}

.bigword {
  background-image: url(../img/bigword1.png);
}
.small-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1em;
  margin-top: -0.5em;
}

.bg-transparent {
  background-color: transparent !important;
}

.team-text {
  padding: 1rem;
}

.display-2 {
  color: #fffcef !important;
  font-family: "Kaisei HarunoUmi", serif;
  font-size: 40px;
  line-height: 60px;
  letter-spacing: 2px;
}

.mbut {
  background-color: var(--primary);
  border-radius: 85px;
  width: 200px;
  color: white;
  line-height: 20px;
  /* 行高 */
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
  z-index: 1000;
  transition: all 0.5s ease;
}

.mbut:hover {
  background-color: #ffde96 !important;
  color: var(--primary);
  font-weight: bolder;
  text-decoration: none;
}

nav::after {
  height: 19px;
  top: auto;
  bottom: 0;
  background: url(../img/bg-header-bottom.png) center center repeat-x;
}

/* .mback{
  display: flex;
  align-items: center;
} */
/* .mback{
 
  background-image: url("../img/nscene0.png");
  background-size: cover;
} */

.boardback {
  background-color: #f8dead;
}

.btn-primary {
  color: var(--white);
  background-color: var(--primary);
  border-color: #f8dead;
}

.btn-primary:hover {
  color: #5F3A16;
  background-color: #f8dead;
  border-color: #f8dead;
}

.bg-primary {
  background-color: #5F3A16 !important;
}

.facility-text:hover {
  transform: rotateY(360deg) !important;
}

/* nav.navbar{ */
/* background: transparent!important; */
/* background: pink;*/
/* background-color: #f8dead;  */
/* 
} */
.nav-link i {
  color: var(--primary) !important;
  font-size: 20px !important;
}

.btn i {
  color: var(--white) !important;
  font-size: 20px !important;
}

.p-0 {
  margin: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: -16px !important;
}

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

.scene {
  background: transparent !important;
}



.container-xxl {
  background-image: linear-gradient(45deg, #ffffff 0%, #fff7f7 99%, #fad0c4 100%);
}

/* 彈幕用 */
.toblur {
  /* #sayto{ */
  background-color: #41414141;
  backdrop-filter: blur(20px);
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
  display: flex;
  height: 100%;
  z-index: 3;
}

#sayto li {
  position: absolute;
  width: auto;
  font-size: 40px;
  line-height: 60px;
  display: block;
  list-style: none;
  animation: scrollTo linear infinite 5s;
  transform: translateX(2000px);
}

@keyframes scrollTo {
  to {
    transform: translateX(-1000px);
  }
}

.dm {
  background-color: #fff;
  border-radius: 30px;
  padding: 5px 30px;
  box-shadow: 0px 0px 4px #414141;
}

/* --------------- */

/* 緞帶 */
.page-mid {
  position: relative;
  /* 確保這裡有相對定位 */
}

.page-mid::before,
.page-mid::after {
  position: absolute;
  content: "";
  width: 100% !important;
  height: 10px;
  top: 0;
  left: 0;
  background: url(../img/bg-header-top.png) center center repeat-x;
  z-index: 1;

  overflow: hidden;
}

.page-mid::after {
  height: 19px;
  top: auto;
  bottom: 0;
  background: url(../img/bg-header-bottom.png) center center repeat-x;
  /* overflow:hidden; */
}

.ov {
  overflow: hidden;
  margin: 0;
}

/* ----修預約區-------------- */
.mb-3 {
  font-weight: bolder;
}

.facility-item {
  background: transparent;
}

.fixed {
  background-image: url(images/fix.png);
  z-index: 999;
  position: fixed;
  
  right: 0;
  top: 200px;
  animation: adv_move 5s ease-in-out infinite;
}

/* 正確的 keyframes 名稱與上下移動效果 */
@keyframes adv_move {
  0% {
    top: 500px;
  }
  50% {
    top: 300px; /* 向上移動 20px */
  }
  100% {
    top: 500px;
  }
}



canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}