@charset "UTF-8";
@font-face {
  font-family: "myFont";
  src: url(./YujiMai-Regular.ttf);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "myFont", DFkai-sb, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

body {
  position: relative;
  overflow-x: hidden;
}

/* 沉浸式背景增強 - 固定背景圖片 */
body img.fixed-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -5;
  object-fit: cover;
  object-position: center center;
}

/* 移除視差滾動效果 - 背景圖片保持固定 */

/* 沉浸式容器 */
.immersive-container {
  position: relative;
  z-index: 1;
}
body .city {
  margin: 2rem;
  border: 2.5px solid burlywood;
  padding: 0.5rem;
  position: relative;
  z-index: 1;
  background: rgba(248, 242, 242, 0.9);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform: translateZ(0);
  will-change: transform;
  /* For smaller screens, ensure text and images fit within the screen width */
  /* Ensure that the photo and content stack vertically if they cannot be aligned side-by-side */
}

/* 優化的卡片 hover 效果 */
body .city:hover {
  transform: translateY(-5px) translateZ(0);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* 滾動動畫類別 */
.fade-in-up {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.fade-in-up.animate {
  opacity: 1;
  transform: translateY(0);
}

/* 隱藏舊的城市卡片樣式 */
body .city {
  display: none !important;
}

body .city:hover {
  transform: translateY(-5px) translateZ(0);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

body .city section.left {
  flex: 0 0 300px;
}
body .city section.left figure {
  margin: 0;
}
body .city section.left img {
  width: 100%;
  display: block;
}
body .city section.right {
  flex: 1;
}

body .city section.right h4 {
  font-size: 2rem;
  color: rgb(255, 248, 186);
  margin: 0 0 0.5rem 0;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}

body .city section.right h5 {
  font-size: 1.5rem;
  color: rgb(6, 120, 120);
}

body .city section.right p {
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.5;
  color: #333;
}

/* ===== 新的城市介紹區塊 - 上下佈局 ===== */
.cities-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.city-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  margin: 3rem auto;
  backdrop-filter: blur(15px);
  border: 2px solid rgba(222, 184, 135, 0.3);
  transition: all 0.4s ease;
  position: relative;
}

.city-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  border-color: rgba(222, 184, 135, 0.5);
}

/* 圖片區域 */
.city-image {
  position: relative;
  height: 400px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.city-image figure {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.city-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.4s ease;
}

.city-card:hover .city-image img {
  transform: scale(1.05);
}

/* 文字內容區域 */
.city-content {
  padding: 2.5rem;
  text-align: center;
}

.city-content h4 {
  font-size: 2.5rem;
  color: rgb(255, 248, 186);
  margin: 0 0 1rem 0;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
  font-weight: 600;
}

.city-content h5 {
  font-size: 1.4rem;
  color: rgb(6, 120, 120);
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
  font-weight: 500;
}

.city-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
  margin: 0 0 1.5rem 0;
  text-align: justify;
}

.city-source {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(222, 184, 135, 0.3);
}

.city-source small {
  color: #666;
  font-size: 0.9rem;
}

.city-source a {
  color: rgb(6, 120, 120);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.city-source a:hover {
  color: rgb(4, 90, 90);
  text-decoration: underline;
}

/* 響應式設計 - 城市卡片 */
@media (max-width: 768px) {
  .cities-section {
    padding: 1rem;
  }

  .city-card {
    margin: 2rem auto;
    border-radius: 20px;
  }

  .city-image {
    height: 300px;
  }

  .city-content {
    padding: 2rem;
  }

  .city-content h4 {
    font-size: 2rem;
  }

  .city-content h5 {
    font-size: 1.2rem;
  }

  .city-content p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .cities-section {
    padding: 0.5rem;
  }

  .city-card {
    margin: 1.5rem auto;
    border-radius: 15px;
  }

  .city-image {
    height: 250px;
  }

  .city-content {
    padding: 1.5rem;
  }

  .city-content h4 {
    font-size: 1.8rem;
  }

  .city-content h5 {
    font-size: 1.1rem;
  }

  .city-content p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .city-source {
    margin-top: 1rem;
    padding-top: 0.8rem;
  }

  .city-source small {
    font-size: 0.8rem;
  }
}

@media (max-width: 320px) {
  .city-image {
    height: 200px;
  }

  .city-content {
    padding: 1rem;
  }

  .city-content h4 {
    font-size: 1.6rem;
  }

  .city-content h5 {
    font-size: 1rem;
  }

  .city-content p {
    font-size: 0.9rem;
  }
}

/* ===== 新的餐廳卡片樣式 ===== */
.restaurant-card-new {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin: 2.5rem auto;
  max-width: 1000px;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(222, 184, 135, 0.2);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}

.restaurant-card-new:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  border-color: rgba(222, 184, 135, 0.4);
}

/* 餐廳圖片區域 */
.restaurant-image {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.restaurant-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.4s ease;
}

.restaurant-card-new:hover .restaurant-image img {
  transform: scale(1.03);
}

/* 餐廳資訊區域 */
.restaurant-info {
  padding: 2rem;
  flex: 1;
}

.restaurant-header {
  margin-bottom: 2rem;
  text-align: center;
}

.restaurant-header h3 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 0.8rem;
  font-weight: 600;
}

.rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.stars {
  color: #f39c12;
  font-size: 1.2rem;
}

.score {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 15px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* 餐廳詳細資訊 */
.restaurant-details {
  margin-bottom: 2rem;
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem;
  background: rgba(248, 249, 250, 0.8);
  border-radius: 12px;
  border-left: 4px solid #e8f4f8;
}

.detail-item i {
  color: #7fb3d3;
  font-size: 1.1rem;
  margin-top: 0.2rem;
  min-width: 16px;
}

.detail-item strong {
  color: #34495e;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.detail-item p {
  color: #5a6c7d;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
}

/* 按鈕區域 */
.restaurant-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-google-search,
.btn-google-maps {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  min-width: 140px;
  justify-content: center;
}

.btn-google-search {
  background: linear-gradient(135deg, #a8d8ea, #7fb3d3);
  color: #2c3e50;
  border: 1px solid rgba(127, 179, 211, 0.3);
}

.btn-google-maps {
  background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
  color: #2c3e50;
  border: 1px solid rgba(253, 203, 110, 0.3);
}

.btn-google-search:hover {
  background: linear-gradient(135deg, #7fb3d3, #6c9bd1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(127, 179, 211, 0.3);
  color: white;
}

.btn-google-maps:hover {
  background: linear-gradient(135deg, #fdcb6e, #e17055);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(253, 203, 110, 0.3);
  color: white;
}

/* 餐廳卡片響應式設計 */
@media (max-width: 768px) {
  .restaurant-card-new {
    margin: 1.5rem;
    border-radius: 15px;
  }

  .restaurant-image {
    height: 220px;
  }

  .restaurant-info {
    padding: 1.5rem;
  }

  .restaurant-header h3 {
    font-size: 1.5rem;
  }

  .detail-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .detail-item {
    padding: 0.8rem;
  }

  .restaurant-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn-google-search,
  .btn-google-maps {
    width: 100%;
    max-width: 250px;
  }
}

@media (max-width: 480px) {
  .restaurant-card-new {
    margin: 1rem;
    border-radius: 12px;
  }

  .restaurant-image {
    height: 180px;
  }

  .restaurant-info {
    padding: 1rem;
  }

  .restaurant-header h3 {
    font-size: 1.3rem;
  }

  .detail-item {
    padding: 0.6rem;
    gap: 0.6rem;
  }

  .detail-item strong {
    font-size: 0.8rem;
  }

  .detail-item p {
    font-size: 0.85rem;
  }

  .btn-google-search,
  .btn-google-maps {
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* 隱藏舊的餐廳卡片樣式 */
.restaurant-card {
  display: none !important;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .restaurant-card {
    margin: 1rem;
    border-radius: 15px;
  }

  .restaurant-image-section {
    height: 250px;
  }

  .restaurant-info {
    padding: 1.5rem;
  }

  .restaurant-header h3 {
    font-size: 1.8rem;
  }

  .restaurant-details {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .detail-section h4 {
    font-size: 1.2rem;
  }

  .restaurant-actions {
    flex-direction: column;
  }

  .action-btn {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .restaurant-card {
    margin: 0.5rem;
    border-radius: 12px;
  }

  .restaurant-image-section {
    height: 200px;
  }

  .restaurant-info {
    padding: 1rem;
  }

  .restaurant-header h3 {
    font-size: 1.6rem;
  }

  .detail-section h4 {
    font-size: 1.1rem;
  }

  .detail-section p,
  .detail-section ul {
    font-size: 0.9rem;
  }
}

/* 原本的城市卡片樣式已恢復 */
@media (max-width: 768px) {
  body .city {
    flex-direction: column;
    gap: 1rem;
    margin: 1rem;
  }
  body .city section.left {
    flex: none;
  }
  body .city section.left img {
    width: 100%;
    border-radius: 20px; /* 圓角縮小適應小螢幕 */
  }
  body .city section.right h2 {
    font-size: 1.8rem;
  }
  body .city section.right h3 {
    font-size: 1.6rem;
  }
  body .city section.right h4,
  body .city section.right h5 {
    font-size: 1.4rem;
  }
  body .city section.right ul {
    font-size: 1.2rem;
  }
}
body .city .city section {
  padding: 20px;
  width: 48%; /* 預設為兩欄排列 */
}
body .city .city .left img {
  max-width: 100%; /* 確保圖片不超過容器寬度 */
  height: auto;
}
@media (max-width: 480px) {
  body .city {
    margin: 0.5rem;
    padding: 0.5rem;
  }
  body .city section.left img {
    border-radius: 15px;
  }
  body .city section.right h2 {
    font-size: 1.6rem;
  }
  body .city section.right h3 {
    font-size: 1.4rem;
  }
  body .city section.right h4,
  body .city section.right h5 {
    font-size: 1.2rem;
  }
  body .city section.right ul {
    font-size: 1rem;
  }
}
@media (max-width: 1024px) {
  body .city .city {
    flex-direction: column;
  }
  body .city .city section.left,
  body .city .city section.right {
    width: 100%; /* Ensures each section takes full width on smaller devices */
  }
}
body .storeTokyo {
  margin-top: 1px; /* 上方的間距改為 1rem */
  margin-right: 2rem;
  margin-bottom: 2rem;
  margin-left: 2rem;
  padding: 0.5rem;
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 50px; /* 加入圓角，數值越大，角越圓 */
  /* For smaller screens, ensure text and images fit within the screen width */
  /* Ensure that the photo and content stack vertically if they cannot be aligned side-by-side */
}
body .storeTokyo section.left {
  flex: 0 0 600px;
}
body .storeTokyo section.left figure {
  margin: 0;
}
body .storeTokyo section.left img {
  width: 100%;
  display: block;
  border-radius: 50px; /* 加入圓角，數值越大，角越圓 */
}
body .storeTokyo section.right {
  flex: 1;
}
body .storeTokyo section.right h2 {
  font-size: 2.2rem;
  color: rgb(255, 223, 117);
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}
body .storeTokyo section.right h3 {
  font-size: 2rem;
  color: rgb(255, 242, 122);
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}
body .storeTokyo section.right h4,
body .storeTokyo section.right h5 {
  font-size: 1.8rem;
  color: rgb(255, 248, 186);
  margin: 0 0 0.5rem 0;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}
body .storeTokyo section.right ul {
  font-size: 1.5rem;
  margin: 0;
  line-height: 1.5;
  color: #333;
}
@media (max-width: 768px) {
  body .storeTokyo {
    flex-direction: column;
    gap: 1rem;
    margin: 1rem;
  }
  body .storeTokyo section.left {
    flex: none;
  }
  body .storeTokyo section.left img {
    width: 100%;
    border-radius: 20px; /* 圓角縮小適應小螢幕 */
  }
  body .storeTokyo section.right h2 {
    font-size: 1.8rem;
  }
  body .storeTokyo section.right h3 {
    font-size: 1.6rem;
  }
  body .storeTokyo section.right h4,
  body .storeTokyo section.right h5 {
    font-size: 1.4rem;
  }
  body .storeTokyo section.right ul {
    font-size: 1.2rem;
  }
}
body .storeTokyo .storeTokyo section {
  padding: 20px;
  width: 48%; /* 預設為兩欄排列 */
}
body .storeTokyo .storeTokyo .left img {
  max-width: 100%; /* 確保圖片不超過容器寬度 */
  height: auto;
}
@media (max-width: 480px) {
  body .storeTokyo {
    margin: 0.5rem;
    padding: 0.5rem;
  }
  body .storeTokyo section.left img {
    border-radius: 15px;
  }
  body .storeTokyo section.right h2 {
    font-size: 1.6rem;
  }
  body .storeTokyo section.right h3 {
    font-size: 1.4rem;
  }
  body .storeTokyo section.right h4,
  body .storeTokyo section.right h5 {
    font-size: 1.2rem;
  }
  body .storeTokyo section.right ul {
    font-size: 1rem;
  }
}
@media (max-width: 1024px) {
  body .storeTokyo .storeTokyo {
    flex-direction: column;
  }
  body .storeTokyo .storeTokyo section.left,
  body .storeTokyo .storeTokyo section.right {
    width: 100%; /* Ensures each section takes full width on smaller devices */
  }
}
body .storeOsaka {
  margin-top: 1px; /* 上方的間距改為 1rem */
  margin-right: 2rem;
  margin-bottom: 2rem;
  margin-left: 2rem;
  padding: 0.5rem;
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 50px; /* 加入圓角，數值越大，角越圓 */
  /* For smaller screens, ensure text and images fit within the screen width */
  /* Ensure that the photo and content stack vertically if they cannot be aligned side-by-side */
}
body .storeOsaka section.left {
  flex: 0 0 600px;
}
body .storeOsaka section.left figure {
  margin: 0;
}
body .storeOsaka section.left img {
  width: 100%;
  display: block;
  border-radius: 50px; /* 加入圓角，數值越大，角越圓 */
}
body .storeOsaka section.right {
  flex: 1;
}
body .storeOsaka section.right h2 {
  font-size: 2.2rem;
  color: rgb(255, 223, 117);
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}
body .storeOsaka section.right h3 {
  font-size: 2rem;
  color: rgb(255, 242, 122);
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}
body .storeOsaka section.right h4,
body .storeOsaka section.right h5 {
  font-size: 1.8rem;
  color: rgb(255, 248, 186);
  margin: 0 0 0.5rem 0;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}
body .storeOsaka section.right ul {
  font-size: 1.5rem;
  margin: 0;
  line-height: 1.5;
  color: #333;
}
@media (max-width: 768px) {
  body .storeOsaka {
    flex-direction: column;
    gap: 1rem;
    margin: 1rem;
  }
  body .storeOsaka section.left {
    flex: none;
  }
  body .storeOsaka section.left img {
    width: 100%;
    border-radius: 20px; /* 圓角縮小適應小螢幕 */
  }
  body .storeOsaka section.right h2 {
    font-size: 1.8rem;
  }
  body .storeOsaka section.right h3 {
    font-size: 1.6rem;
  }
  body .storeOsaka section.right h4,
  body .storeOsaka section.right h5 {
    font-size: 1.4rem;
  }
  body .storeOsaka section.right ul {
    font-size: 1.2rem;
  }
}
body .storeOsaka .storeOsaka section {
  padding: 20px;
  width: 48%; /* 預設為兩欄排列 */
}
body .storeOsaka .storeOsaka.left img {
  max-width: 100%; /* 確保圖片不超過容器寬度 */
  height: auto;
}
@media (max-width: 480px) {
  body .storeOsaka {
    margin: 0.5rem;
    padding: 0.5rem;
  }
  body .storeOsaka section.left img {
    border-radius: 15px;
  }
  body .storeOsaka section.right h2 {
    font-size: 1.6rem;
  }
  body .storeOsaka section.right h3 {
    font-size: 1.4rem;
  }
  body .storeOsaka section.right h4,
  body .storeOsaka section.right h5 {
    font-size: 1.2rem;
  }
  body .storeOsaka section.right ul {
    font-size: 1rem;
  }
}
@media (max-width: 1024px) {
  body .storeOsaka .storeOsaka {
    flex-direction: column;
  }
  body .storeOsaka .storeOsaka section.left,
  body .storeOsaka .storeOsaka section.right {
    width: 100%; /* Ensures each section takes full width on smaller devices */
  }
}
body .storekyoto {
  margin-top: 1px; /* 上方的間距改為 1rem */
  margin-right: 2rem;
  margin-bottom: 2rem;
  margin-left: 2rem;
  padding: 0.5rem;
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 50px; /* 加入圓角，數值越大，角越圓 */
  /* For smaller screens, ensure text and images fit within the screen width */
  /* Ensure that the photo and content stack vertically if they cannot be aligned side-by-side */
}
body .storekyoto section.left {
  flex: 0 0 600px;
}
body .storekyoto section.left figure {
  margin: 0;
}
body .storekyoto section.left img {
  width: 100%;
  display: block;
  border-radius: 50px; /* 加入圓角，數值越大，角越圓 */
}
body .storekyoto section.right {
  flex: 1;
}
body .storekyoto section.right h2 {
  font-size: 2.2rem;
  color: rgb(255, 223, 117);
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}
body .storekyoto section.right h3 {
  font-size: 2rem;
  color: rgb(255, 242, 122);
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}
body .storekyoto section.right h4,
body .storekyoto section.right h5 {
  font-size: 1.8rem;
  color: rgb(255, 248, 186);
  margin: 0 0 0.5rem 0;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}
body .storekyoto section.right ul {
  font-size: 1.5rem;
  margin: 0;
  line-height: 1.5;
  color: #333;
}
@media (max-width: 768px) {
  body .storekyoto {
    flex-direction: column;
    gap: 1rem;
    margin: 1rem;
  }
  body .storekyoto section.left {
    flex: none;
  }
  body .storekyoto section.left img {
    width: 100%;
    border-radius: 20px; /* 圓角縮小適應小螢幕 */
  }
  body .storekyoto section.right h2 {
    font-size: 1.8rem;
  }
  body .storekyoto section.right h3 {
    font-size: 1.6rem;
  }
  body .storekyoto section.right h4,
  body .storekyoto section.right h5 {
    font-size: 1.4rem;
  }
  body .storekyoto section.right ul {
    font-size: 1.2rem;
  }
}
body .storekyoto .storekyoto section {
  padding: 20px;
  width: 48%; /* 預設為兩欄排列 */
}
body .storekyoto .storekyoto.left img {
  max-width: 100%; /* 確保圖片不超過容器寬度 */
  height: auto;
}
@media (max-width: 480px) {
  body .storekyoto {
    margin: 0.5rem;
    padding: 0.5rem;
  }
  body .storekyoto section.left img {
    border-radius: 15px;
  }
  body .storekyoto section.right h2 {
    font-size: 1.6rem;
  }
  body .storekyoto section.right h3 {
    font-size: 1.4rem;
  }
  body .storekyoto section.right h4,
  body .storekyoto section.right h5 {
    font-size: 1.2rem;
  }
  body .storekyoto section.right ul {
    font-size: 1rem;
  }
}
@media (max-width: 1024px) {
  body .storekyoto .storekyoto {
    flex-direction: column;
  }
  body .storekyoto .storekyoto section.left,
  body .storekyoto .storekyoto section.right {
    width: 100%; /* Ensures each section takes full width on smaller devices */
  }
}
body header {
  background-color: rgb(247, 193, 111);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

body header section.logo {
  flex: 2 1 400px;
  display: flex;
  align-items: center;
}

body header section.logo h1 {
  font-size: 2.5rem;
  margin: 0;
}

body header section.logo img {
  width: 6vw;
  height: 6vw;
  margin-right: 1rem;
}

body header nav {
  flex: 5 1 500px;
  position: relative;
}

/* 導覽選單樣式 */
body header nav .nav-menu {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

body header nav .nav-menu li a {
  color: black;
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  position: relative;
  display: block;
}

/* 改善的hover效果 */
body header nav .nav-menu li a:hover {
  color: rgb(79, 133, 155);
  background-color: rgba(79, 133, 155, 0.1);
  transform: translateY(-2px);
}

/* 當前頁面指示樣式 */
body header nav .nav-menu li a.nav-active {
  color: rgb(79, 133, 155);
  background-color: rgba(79, 133, 155, 0.15);
  font-weight: 700;
  border-bottom: 3px solid rgb(79, 133, 155);
}

/* 漢堡選單按鈕 (預設隱藏) */
body header nav .nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 0.5rem;
}

body header nav .nav-toggle span {
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 2px;
}

/* 筆記型電腦解析度修正 (1025*575以下) */
@media (max-width: 1025px) and (max-height: 575px) {
  body header {
    padding: 0.3rem 0.8rem;
    min-height: 60px;
  }

  body header section.logo {
    flex: 1 1 300px;
  }

  body header section.logo img {
    width: 40px;
    height: 40px;
    margin-right: 0.5rem;
  }

  body header section.logo h1 {
    font-size: 1.8rem;
  }

  body header nav {
    flex: 2 1 400px;
  }

  body header nav .nav-menu li a {
    font-size: 1.1rem;
    padding: 0.4rem 0.8rem;
  }
}

/* 中等螢幕導覽列優化 */
@media (max-width: 1024px) and (min-height: 576px) {
  body header {
    padding: 0.5rem 1rem;
  }

  body header section.logo img {
    width: 45px;
    height: 45px;
  }

  body header section.logo h1 {
    font-size: 2rem;
  }

  body header nav .nav-menu li a {
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
  }
}

/* 響應式導覽列 */
@media (max-width: 768px) {
  body header {
    flex-direction: row;
    align-items: center;
    padding: 1rem;
    position: relative; /* 讓下拉選單可相對 header 絕對定位 */
  }

  body header section.logo {
    width: auto;
    flex: 1 1 auto; /* 撐開剩餘空間，讓 nav 靠右 */
    justify-content: flex-start;
    margin-bottom: 0;
  }

  body header section.logo img {
    width: 50px;
    height: 50px;
  }

  body header section.logo h1 {
    font-size: 1.8rem;
  }

  body header nav {
    width: auto;
    flex: none;
    position: static; /* 由 header 作為定位參照 */
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  body header nav .nav-toggle {
    display: flex;
    position: static; /* 與 logo 同列，靠右的 nav 內顯示 */
    z-index: 1101;
  }

  body header nav .nav-menu {
    /* 手機展開：靠右對齊，向左下展開的白底卡片 */
    display: none;
    position: absolute; /* 以 header 為定位參照 */
    top: calc(100% + 0.6rem);
    right: 1rem; /* 與 header 內邊距對齊，避免貼齊螢幕 */
    left: auto;
    transform: none;
    width: min(420px, calc(100vw - 2rem));
    box-sizing: border-box; /* 含邊框計算寬度，避免溢出 */

    background: rgb(247, 193, 111); /* 與桌面導覽列一致的橘黃色 */
    border: 4px solid #ffd84d; /* 亮黃色外框 */
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 2000; /* 提高層級，避免被其他區塊覆蓋 */
    padding: 0; /* 讓內部項目緊貼外框 */
    overflow: hidden; /* 內部分隔線不超出圓角 */
  }

  body header nav .nav-menu.active {
    display: block;
  }

  body header nav .nav-menu li {
    width: 100%;
  }

  body header nav .nav-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.85rem 1rem;
    font-size: 1.2rem; /* 回復接近原本尺寸 */
    text-align: center;
    background: transparent;
    color: black; /* 回復原本文字顏色 */
    font-weight: 500;
    border: none;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  /* 內部分隔線（不包含第一個） */
  body header nav .nav-menu li + li a {
    border-top: 4px solid #ffd84d;
  }

  /* hover 效果（回復原本的藍色） */
  body header nav .nav-menu li a:hover {
    background-color: rgba(79, 133, 155, 0.1);
    color: rgb(79, 133, 155);
  }

  /* 方塊樣式下不需要最後一個去邊線 */
  body header nav .nav-menu li:last-child a {
    border: none;
  }

  /* 漢堡選單動畫 */
  body header nav .nav-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }

  body header nav .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  body header nav .nav-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }
}

@media (max-width: 480px) {
  body header {
    padding: 0.6rem 0.8rem;
  }

  body header section.logo img {
    width: 40px;
    height: 40px;
    margin-right: 0.5rem;
  }

  body header section.logo h1 {
    font-size: 1.3rem;
  }

  body header nav .nav-menu li a {
    font-size: 1rem;
    padding: 0.75rem;
  }

  body header nav .nav-toggle span {
    width: 22px;
    height: 2px;
  }
}
/* 沉浸式首頁背景 */

/* 小螢幕（含 320px）導覽列可視性與標題可讀性強化 */
@media (max-width: 768px) {
  /* 讓漢堡按鈕更顯眼 */
  body header nav .nav-toggle {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 6px 8px; /* 與原有 padding 疊加，實際以此為準 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
  }
  body header nav .nav-toggle span {
    background-color: #ffffff; /* 橘色背景上對比更高 */
  }

  /* 縮小 header 高度，並將漢堡鍵放在右上角 */
  body header {
    padding: 0.35rem 0.6rem;
    min-height: 48px;
    flex-direction: row;
    align-items: center;
    position: relative; /* 讓漢堡按鈕以 header 為定位參考 */
  }
  /* 讓 nav 成為定位參照 */
  body header nav {
    position: relative;
  }
  body header section.logo {
    padding-right: 2.2rem; /* 給右上的漢堡鍵預留空間 */
    width: auto; /* 不要撐滿整行，與漢堡鍵分列 */
    justify-content: flex-start;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
  }
  body header section.logo img {
    width: 36px;
    height: 36px;
  }
  body header section.logo h1 {
    font-size: 1.25rem;
    max-width: 62vw; /* 預留右側給漢堡鍵 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body header nav .nav-toggle {
    position: static;
    z-index: 1101;
  }
  body header nav .nav-menu {
    margin-top: 0;
  }

  /* 首頁主視覺文案縮小 */
  body main.home section.background-img h3 {
    font-size: 2rem;
    line-height: 1.45;
  }
}

@media (max-width: 480px) {
  /* 標題過長時以省略處理，避免擠壓 */
  body header section.logo h1 {
    max-width: 65vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 首頁主視覺文案再縮小 */
  body main.home section.background-img h3 {
    font-size: 1.45rem;
    line-height: 1.45;
  }
}

@media (max-width: 360px) {
  /* 320~360px 再進一步調整 */
  body header {
    min-height: 44px;
    padding: 0.3rem 0.5rem;
    flex-direction: row;
    align-items: center;
    position: relative; /* 讓漢堡按鈕以 header 為定位參考 */
  }
  body header nav {
    position: relative;
  }
  body header section.logo {
    padding-right: 2rem;
    width: auto;
    justify-content: flex-start;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
  }
  body header section.logo img {
    width: 32px;
    height: 32px;
  }
  body header section.logo h1 {
    font-size: 1.1rem;
    max-width: 62vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body header nav .nav-toggle {
    position: static;
    padding: 6px;
    z-index: 1101;
  }
  body header nav .nav-toggle span {
    width: 18px;
    height: 2.2px;
  }
  body main.home section.background-img h3 {
    font-size: 1.2rem;
    line-height: 1.35;
  }
}

body main.home section.background-img {
  min-height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

body main.home section.background-img div.filter {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
  width: 100%;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  backdrop-filter: blur(2px);
}

body main.home section.background-img h3 {
  color: white;
  font-size: 3rem;
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1.5s ease forwards;
  animation-delay: 0.5s;
  line-height: 1.4;
  max-width: 90%;
}

/* 沉浸式標題動畫 */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body main.tokyo section.background-img {
  min-height: 35vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
body main.tokyo section.background-img div.filter {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
body main.tokyo section.background-img h3 {
  color: white;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
}
body main.tokyo section.background-img hr {
  width: 90%;
  border: 1px solid white;
  margin: 1rem 0;
  opacity: 0.7;
  text-align: center;
}
body main.tokyo section.tokyohr {
  min-height: 20vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
body main.tokyo section.tokyohr h3 {
  margin-top: 25px;
  color: white;
  font-size: 3.5rem;
  text-align: center;
}
body main.tokyo section.tokyohr div.filter {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
body main.tokyo section.tokyohr hr {
  width: 90%;
  border: 1px solid white;
  margin: 1rem 0;
  opacity: 0.7;
  text-align: center;
}
/* 優化輪播區域 - 東京 (進一步增加高度顯示旅客街道) */
body main.tokyo section.tokyo-img {
  position: relative;
  min-height: 95vh;
  overflow: hidden;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

body main.tokyo section.tokyo-img .carousel-inner {
  height: 100%;
}

body main.tokyo section.tokyo-img .carousel-bg {
  height: 95vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 增強輪播控制按鈕 */
body main.tokyo section.tokyo-img .carousel-control-prev-icon,
body main.tokyo section.tokyo-img .carousel-control-next-icon {
  filter: invert(100%);
  background-size: 30px 30px;
  transition: all 0.3s ease;
}

body main.tokyo section.tokyo-img .carousel-control-prev,
body main.tokyo section.tokyo-img .carousel-control-next {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: auto 20px;
  transition: all 0.3s ease;
}

body main.tokyo section.tokyo-img .carousel-control-prev:hover,
body main.tokyo section.tokyo-img .carousel-control-next:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}
body main.tokyo section.tokyo-img .bx-controls-direction {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  z-index: 10;
}
body main.tokyo section.tokyo-img .bx-controls-direction .bx-prev,
body main.tokyo section.tokyo-img .bx-controls-direction .bx-next {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-block;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  transition: background-image 0.3s ease;
}
body main.tokyo section.tokyo-img .bx-controls-direction .bx-prev::before,
body main.tokyo section.tokyo-img .bx-controls-direction .bx-next::before {
  content: "";
  position: absolute;
  top: -300px;
  bottom: -300px;
  left: -100px;
  right: -100px;
  background: transparent;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  body main.tokyo section.background-img h3,
  body main.tokyo section.tokyohr h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  body main.tokyo section.background-img hr,
  body main.tokyo section.tokyohr hr {
    width: 80%;
  }
  body main.tokyo section.tokyo-img {
    min-height: 85vh;
  }
  body main.tokyo section.tokyo-img .carousel-bg {
    height: 85vh;
  }
  body main.tokyo section.tokyo-img .bx-controls-direction .bx-prev,
  body main.tokyo section.tokyo-img .bx-controls-direction .bx-next {
    width: 30px;
    height: 30px;
  }
}
@media screen and (max-width: 1024px) {
  body main.tokyo section.background-img h3,
  body main.tokyo section.tokyohr h3 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
  }
  body main.tokyo section.background-img hr,
  body main.tokyo section.tokyohr hr {
    width: 85%;
  }
  body main.tokyo section.tokyo-img {
    min-height: 90vh;
  }
  body main.tokyo section.tokyo-img .carousel-bg {
    height: 90vh;
  }
}
body main.Osaka section.background-img {
  min-height: 35vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 垂直排列 h3 和 hr */
}
body main.Osaka section.background-img div.filter {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
body main.Osaka section.background-img h3 {
  color: white;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem; /* 增加 h3 下方的間距 */
}
body main.Osaka section.background-img hr {
  width: 90%; /* 調整 <hr> 的寬度 */
  border: 1px solid white; /* 設定邊框顏色 */
  margin: 1rem 0; /* 增加上下的間距 */
  opacity: 0.7; /* 調整透明度 */
  text-align: center; /* 確保 hr 在容器中居中 */
}
body main.Osaka section.Osakahr {
  min-height: 20vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 垂直排列 h3 和 hr */
}
body main.Osaka section.Osakahr h3 {
  margin-top: 25px;
  color: white;
  font-size: 3.5rem;
  text-align: center;
}
body main.Osaka section.Osakahr div.filter {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
body main.Osaka section.Osakahr hr {
  width: 90%; /* 調整 <hr> 的寬度 */
  border: 1px solid white; /* 設定邊框顏色 */
  margin: 1rem 0; /* 增加上下的間距 */
  opacity: 0.7; /* 調整透明度 */
  text-align: center; /* 確保 hr 在容器中居中 */
}
/* 優化輪播區域 - 大阪 (進一步增加高度顯示旅客街道) */
body main.Osaka section.Osaka-img {
  position: relative;
  min-height: 95vh;
  overflow: hidden;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

body main.Osaka section.Osaka-img .carousel-inner {
  height: 100%;
}

body main.Osaka section.Osaka-img .carousel-bg {
  height: 95vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

body main.Osaka section.Osaka-img .carousel-control-prev-icon,
body main.Osaka section.Osaka-img .carousel-control-next-icon {
  filter: invert(100%);
  background-size: 30px 30px;
  transition: all 0.3s ease;
}

body main.Osaka section.Osaka-img .carousel-control-prev,
body main.Osaka section.Osaka-img .carousel-control-next {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: auto 20px;
  transition: all 0.3s ease;
}

body main.Osaka section.Osaka-img .carousel-control-prev:hover,
body main.Osaka section.Osaka-img .carousel-control-next:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}

body main.Osaka section.Osaka-img .bx-controls-direction {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  z-index: 10;
}
body main.Osaka section.Osaka-img .bx-controls-direction .bx-prev,
body main.Osaka section.Osaka-img .bx-controls-direction .bx-next {
  position: relative;
  width: 40px; /* 設定寬度 */
  height: 40px; /* 設定高度 */
  display: inline-block;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  transition: background-image 0.3s ease;
}
body main.Osaka section.Osaka-img .bx-controls-direction .bx-prev::before,
body main.Osaka section.Osaka-img .bx-controls-direction .bx-next::before {
  content: ""; /* 使用偽元素增加點擊範圍 */
  position: absolute;
  top: -300px; /* 擴大到上方 10px */
  bottom: -300px; /* 擴大到下方 10px */
  left: -100px; /* 擴大到左側 10px */
  right: -100px; /* 擴大到右側 10px */
  background: transparent; /* 確保透明，不影響外觀 */
  z-index: -1; /* 保證圖片仍然可見 */
}
body main.kyoto section.background-img {
  min-height: 35vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 垂直排列 h3 和 hr */
}
body main.kyoto section.background-img div.filter {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
body main.kyoto section.background-img h3 {
  color: white;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem; /* 增加 h3 下方的間距 */
}
body main.kyoto section.background-img hr {
  width: 90%; /* 調整 <hr> 的寬度 */
  border: 1px solid white; /* 設定邊框顏色 */
  margin: 1rem 0; /* 增加上下的間距 */
  opacity: 0.7; /* 調整透明度 */
  text-align: center; /* 確保 hr 在容器中居中 */
}
body main.kyoto section.kyotohr {
  min-height: 20vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 垂直排列 h3 和 hr */
}
body main.kyoto section.kyotohr h3 {
  margin-top: 25px;
  color: white;
  font-size: 3.5rem;
  text-align: center;
}
body main.kyoto section.kyotohr div.filter {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
body main.kyoto section.kyotohr hr {
  width: 90%; /* 調整 <hr> 的寬度 */
  border: 1px solid white; /* 設定邊框顏色 */
  margin: 1rem 0; /* 增加上下的間距 */
  opacity: 0.7; /* 調整透明度 */
  text-align: center; /* 確保 hr 在容器中居中 */
}
/* 優化輪播區域 - 京都 (進一步增加高度顯示旅客街道) */
body main.kyoto section.kyoto-img {
  position: relative;
  min-height: 95vh;
  overflow: hidden;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

body main.kyoto section.kyoto-img .carousel-inner {
  height: 100%;
}

body main.kyoto section.kyoto-img .carousel-bg {
  height: 95vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

body main.kyoto section.kyoto-img .carousel-control-prev-icon,
body main.kyoto section.kyoto-img .carousel-control-next-icon {
  filter: invert(100%);
  background-size: 30px 30px;
  transition: all 0.3s ease;
}

body main.kyoto section.kyoto-img .carousel-control-prev,
body main.kyoto section.kyoto-img .carousel-control-next {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: auto 20px;
  transition: all 0.3s ease;
}

body main.kyoto section.kyoto-img .carousel-control-prev:hover,
body main.kyoto section.kyoto-img .carousel-control-next:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}
body main.kyoto section.kyoto-img .bx-controls-direction {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  z-index: 10;
}
body main.kyoto section.kyoto-img .bx-controls-direction .bx-prev,
body main.kyoto section.kyoto-img .bx-controls-direction .bx-next {
  position: relative;
  width: 40px; /* 設定寬度 */
  height: 40px; /* 設定高度 */
  display: inline-block;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  transition: background-image 0.3s ease;
}
body main.kyoto section.kyoto-img .bx-controls-direction .bx-prev::before,
body main.kyoto section.kyoto-img .bx-controls-direction .bx-next::before {
  content: ""; /* 使用偽元素增加點擊範圍 */
  position: absolute;
  top: -300px; /* 擴大到上方 10px */
  bottom: -300px; /* 擴大到下方 10px */
  left: -100px; /* 擴大到左側 10px */
  right: -100px; /* 擴大到右側 10px */
  background: transparent; /* 確保透明，不影響外觀 */
  z-index: -1; /* 保證圖片仍然可見 */
}

.bx-prev {
  background-image: url("../按鈕圖片/左按鈕背景2.png"); /* 預設的圖片 */
}

.bx-prev:hover {
  background-image: url("../按鈕圖片/左按鈕背景1.png"); /* hover 時顯示的圖片 */
}

.bx-next {
  background-image: url("../按鈕圖片/右按鈕背景2.png"); /* 預設的圖片 */
}

.bx-next:hover {
  background-image: url("../按鈕圖片/右按鈕背景1.png"); /* hover 時顯示的圖片 */
}

/* ===== 輪播組件照片名稱重新設計 ===== */
.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    transparent 100%
  );
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  border-radius: 0 0 30px 30px;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
}

.carousel-caption h5 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.8rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.carousel-caption h5::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.carousel-caption p {
  font-size: 1.1rem;
  font-weight: 400;
  color: #f8f9fa;
  line-height: 1.6;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
  margin-bottom: 0;
  opacity: 0.95;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 輪播組件懸停效果 */
.carousel-item:hover .carousel-caption {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.7) 50%,
    transparent 100%
  );
  transform: translateY(-5px);
}

.carousel-item:hover .carousel-caption h5 {
  transform: scale(1.05);
  text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9);
}

.carousel-item:hover .carousel-caption p {
  opacity: 1;
  color: #ffffff;
}

/* 響應式設計 - 輪播組件優化 (進一步增加高度顯示旅客街道) */
@media (max-width: 768px) {
  body main.tokyo section.tokyo-img,
  body main.Osaka section.Osaka-img,
  body main.Kyoto section.Kyoto-img,
  body main.Nara section.Nara-img {
    min-height: 85vh;
  }

  body main.tokyo section.tokyo-img .carousel-bg,
  body main.Osaka section.Osaka-img .carousel-bg,
  body main.Kyoto section.Kyoto-img .carousel-bg,
  body main.Nara section.Nara-img .carousel-bg {
    height: 85vh;
    background-size: cover;
    background-position: center center;
  }

  /* 響應式輪播標題 */
  .carousel-caption {
    padding: 1.5rem 1rem 1.5rem;
  }

  .carousel-caption h5 {
    font-size: 1.6rem;
    letter-spacing: 1px;
    margin-bottom: 0.6rem;
  }

  .carousel-caption h5::after {
    width: 40px;
    height: 2px;
    bottom: -6px;
  }

  .carousel-caption p {
    font-size: 0.95rem;
    padding: 0 0.5rem;
  }
}

@media (max-width: 480px) {
  body main.tokyo section.tokyo-img,
  body main.Osaka section.Osaka-img,
  body main.Kyoto section.Kyoto-img,
  body main.Nara section.Nara-img {
    min-height: 75vh;
  }

  body main.tokyo section.tokyo-img .carousel-bg,
  body main.Osaka section.Osaka-img .carousel-bg,
  body main.Kyoto section.Kyoto-img .carousel-bg,
  body main.Nara section.Nara-img .carousel-bg {
    height: 75vh;
  }

  /* 小螢幕輪播標題 */
  .carousel-caption {
    padding: 1rem 0.8rem 1.2rem;
  }

  .carousel-caption h5 {
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
  }

  .carousel-caption h5::after {
    width: 30px;
    height: 2px;
    bottom: -4px;
  }

  .carousel-caption p {
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 0 0.3rem;
  }
}

/* 街道風景圖片特殊優化 - 優先顯示旅客和街道 */
.street-view-carousel {
  background-size: cover !important;
  background-position: center 55% !important; /* 調整為顯示更多街道和旅客 */
  background-repeat: no-repeat !important;
}

.street-view-carousel.akihabara {
  background-position: center 50% !important; /* 調整顯示更多街道 */
}

.street-view-carousel.kabukicho {
  background-position: center 55% !important; /* 調整顯示更多旅客 */
}

.street-view-carousel.asakusa {
  background-position: center 60% !important; /* 調整顯示更多街道活動 */
}

.street-view-carousel.dotonbori {
  background-position: center 60% !important; /* 調整顯示更多街道和旅客 */
}

.street-view-carousel.shinsaibashi {
  background-position: center 55% !important; /* 調整顯示更多購物街景 */
}

.street-view-carousel.shinsekai {
  background-position: center 50% !important; /* 調整顯示更多市場活動 */
}

.street-view-carousel.hanami {
  background-position: center 55% !important; /* 調整顯示更多賞櫻人群 */
}

.street-view-carousel.nishiki {
  background-position: center 55% !important; /* 調整顯示更多市場街景 */
}

/* 優化輪播區域 - 奈良 (進一步增加高度顯示旅客街道) */
body main.Nara section.Nara-img {
  position: relative;
  min-height: 95vh;
  overflow: hidden;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

body main.Nara section.Nara-img .carousel-inner {
  height: 100%;
}

body main.Nara section.Nara-img .carousel-bg {
  height: 95vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

body main.Nara section.Nara-img .carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
  z-index: 1;
}

body main.Nara section.Nara-img .carousel-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 800px;
  padding: 0 20px;
}

body main.Nara section.Nara-img .carousel-content h2 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  letter-spacing: 2px;
}

body main.Nara section.Nara-img .carousel-content p {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  margin-bottom: 0;
}

/* 奈良區域的街景輪播特殊定位 */
.street-view-carousel.nara-park {
  background-position: center 40% !important;
}

.street-view-carousel.todaiji {
  background-position: center 35% !important;
}

.street-view-carousel.kasuga {
  background-position: center 45% !important;
}

/* AOS 效能優化 */
[data-aos] {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 減少重繪和回流 */
.carousel-bg,
.fixed-image,
.filter {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 優化圖片載入 */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* 硬體加速 */
.carousel-inner,
.carousel-item,
.city,
.storeTokyo,
.storeOsaka,
.storekyoto {
  transform: translateZ(0);
  will-change: transform;
}

/* 優化動畫效能 */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    animation: none !important;
    transition: none !important;
  }
}

/* 針對低效能裝置的優化 */
@media (max-width: 768px) {
  [data-aos] {
    animation-duration: 0.6s !important;
    transition-duration: 0.6s !important;
  }
}

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