@charset "UTF-8";
/* ========================
  🎨 Design Tokens - Variables
======================== */
/* Color */
/* Breakpoints */
/* Font Family */
/* =========================================
  Responsive Section Spacing System v1

  規則：
  - .page = 預設 spacing（clamp），全站統一
  - section-* = override（例外），只在偏離預設時使用
  - 禁止在 .pageXX 內寫 padding
  - 所有 spacing 必須透過 class 控制
  - 命名使用 mobile / desktop，不使用 m / d 縮寫

  使用範例：

  <section class="pageXX page section-px-mobile-0">
  → 手機滿版，桌機維持 .page clamp

  <section class="pageXX page section-px-0">
  → 全尺寸滿版

  <section class="pageXX page section-px-mobile-0 section-py-lg">
  → 手機左右滿版，上下大節奏

  ⚠️ 舊版 section-py-1~6 / section-px-1~6 / section-pt/pb/ps/pe-1~6
    及所有 v2.x scale class 已移除，不再存在。

========================================= */
/* ─── Platform Default ───────────────────────────────────── */
:root {
  --page-px: clamp(2rem, calc(0.8rem + 6.51vw), 10rem);
  --page-py: clamp(2.459rem, calc(1.1141rem + 5.74vw), 8rem);
  --section-gutter-y: clamp(2rem, calc(0.8rem + 6.51vw), 10rem);
  --section-gutter-x: clamp(2.1736rem, calc(-0.0142rem + 9.33vw), 10rem);
}

.page {
  overflow: hidden;
  padding-inline: clamp(2.1875rem, 0.0275rem + 9.22vw, 5.7356rem);
  padding-block: clamp(2rem, 0.1737rem + 7.79vw, 5rem);
}
@media (min-width: 992px) {
  .page {
    padding-inline: clamp(4.1981rem, 0.0004rem + 6.77vw, 8.125rem);
    padding-block: clamp(3.125rem, 0.0517rem + 4.96vw, 6rem);
  }
}

.gutter-section {
  --bs-gutter-y: var(--section-gutter-y);
  --bs-gutter-x: 0;
}
@media (min-width: 992px) {
  .gutter-section {
    --bs-gutter-y: 0;
    --bs-gutter-x: var(--section-gutter-x);
  }
}

/* ─── Mobile Full-Bleed + Content Inset ─────────────────── */
/* 手機 full-bleed section 中，局部內容補回 page padding 用
  使用方式：
  1. <section> 加 .section-px-mobile-0（移除 mobile padding）
  2. 需要保留留白的內容欄加 .section-content-mobile（補回）
  禁止：直接在該欄寫死 padding-inline 數值
  禁止：使用 px-page-mobile（已移除）或其他自訂名稱 */
@media (max-width: 991px) {
  .section-content-mobile {
    padding-inline: var(--page-px);
  }
}

/* ─── Base Overrides（全尺寸，mobile + desktop）──────────── */
.section-px-0 {
  padding-inline: 0;
}

.section-py-0 {
  padding-block: 0;
}

.section-pt-0 {
  padding-top: 0;
}

.section-pb-0 {
  padding-bottom: 0;
}

.section-ps-0 {
  padding-left: 0;
}

.section-pe-0 {
  padding-right: 0;
}

.section-inset-narrow {
  padding-inline: clamp(0px, 2vw, 24px);
}

.section-inset-wide {
  padding-inline: clamp(24px, 8vw, 240px);
}

.section-py-lg {
  padding-block: clamp(80px, 12vw, 200px);
}

/* ─── Mobile Overrides（max-width: < 992px）─────────────── */
@media (max-width: 991px) {
  .section-px-mobile-0 {
    padding-inline: 0;
  }
  .section-py-mobile-0 {
    padding-block: 0;
  }
  .section-pt-mobile-0 {
    padding-top: 0;
  }
  .section-pb-mobile-0 {
    padding-bottom: 0;
  }
  .section-ps-mobile-0 {
    padding-left: 0;
  }
  .section-pe-mobile-0 {
    padding-right: 0;
  }
}
/* ─── Desktop Overrides（min-width: ≥ 992px）────────────── */
@media (min-width: 992px) {
  .section-px-desktop-0 {
    padding-inline: 0;
  }
  .section-py-desktop-0 {
    padding-block: 0;
  }
  .section-pt-desktop-0 {
    padding-top: 0;
  }
  .section-pb-desktop-0 {
    padding-bottom: 0;
  }
  .section-ps-desktop-0 {
    padding-left: 0;
  }
  .section-pe-desktop-0 {
    padding-right: 0;
  }
}
/* Root Tokens（給 CSS / JS 共用） */
/* ⚠️ Typography Token System v1 FINAL
  font size / display / role token 已凍結。
  調整必須回 Phase 0，在 style.scss :root 覆蓋對應 --role-page-* token，
  不得直接修改本區段。 */
:root {
  /* ─── Font Size Scale（fluid clamp，viewport 320→1440px）─── */
  --fs-h1: clamp(1.6rem, calc(21.5px + 1.29vw), 2.5rem);
  --fs-h2: clamp(1.2rem, calc(15.5px + 1.14vw), 2rem);
  --fs-h3: clamp(1.1rem, calc(15.8px + 0.57vw), 1.5rem);
  --fs-h4: clamp(1rem, calc(15.4px + 0.18vw), 1.125rem);
  --fs-small: clamp(0.75rem, calc(11.4px + 0.18vw), 0.875rem);
  --fs-caption: clamp(0.65rem, calc(9.9px + 0.14vw), 0.75rem);
  /* ─── Display Headings（fluid clamp）──────────────────────── */
  --display-1: clamp(2.5rem, calc(28.6px + 3.57vw), 5rem);
  --display-2: clamp(2.25rem, calc(25.7px + 3.21vw), 4.5rem);
  --display-3: clamp(2rem, calc(22.9px + 2.86vw), 4rem);
  --display-4: clamp(1.75rem, calc(20px + 2.5vw), 3.5rem);
  --display-5: clamp(1.5rem, calc(17.1px + 2.14vw), 3rem);
  --display-6: clamp(1.25rem, calc(14.3px + 1.79vw), 2.5rem);
  /* Font Role Token Mapping（Phase 0 可覆蓋）*/
  --role-font-en-title: Times New Roman, serif;
  --role-font-zh-title: Noto Serif JP, PMingLiU, serif;
  --role-font-subtitle: Noto Sans JP, PingFang TC, Microsoft JhengHei, sans-serif;
  --role-font-label: Helvetica Neue, Arial, sans-serif;
  --role-font-caption: Noto Sans JP, PingFang TC, Microsoft JhengHei, sans-serif;
  /* Color Tokens（Phase 0 可覆蓋）*/
  --color-primary: #40613C;
  --color-primary-hover: #203f1d;
  --color-primary-rgb: 64,
  97,
  60;
  /* Gradient Tokens */
  --gradient-primary: linear-gradient(180deg,
      rgba(197, 229, 232, 0.875) 0%,
      rgba(207, 220, 222, 0.896) 30%,
      rgba(229, 218, 218, 0.919) 65%,
      rgba(237, 201, 210, 0.949) 100%);
  /* Role Weight Token Mapping（Phase 0 可覆蓋）*/
  --role-weight-en-title: 500;
  --role-weight-zh-title: 500;
  --role-weight-subtitle: 400;
  --role-weight-label: 400;
  --role-weight-caption: 400;
}

/* ========================
  🔧 Base
======================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Noto Sans JP", "PingFang TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.66;
  letter-spacing: 0.04em;
  font-size: clamp(0.6rem, 0.0141rem + 2.5vw, 1.5625rem);
}
@media (min-width: 992px) {
  body {
    font-size: clamp(0.2197rem, 0.94vw, 1.125rem);
  }
}

/* ========================
  🎨 Color System
======================== */
.text-primary {
  color: var(--color-primary) !important;
}

.bg-gray {
  background-color: #898989;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.btn-primary {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn-primary:active, .btn-primary.active {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-light {
  background-color: #898989;
  border-color: #898989;
  color: #fff;
}

/* ========================
  🎭 form
======================== */
.form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.form-control {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: #C9CACA;
}
.form-control:focus {
  color: #333333;
  background-color: #fff;
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 10px 3px rgba(85, 98, 34, 0.436);
}

/* ========================
  Link / Button
======================== */
a,
.btn {
  text-decoration: none;
  border-radius: 0;
}
a:hover,
.btn:hover {
  text-decoration: none;
}

a:focus,
button:focus {
  outline: none !important;
}

/* ========================
  🖼 Image
======================== */
.Img {
  position: relative;
}
.Img a {
  display: block;
}
.Img .innerImg {
  position: relative;
  width: 100%;
  padding-top: 55%;
}
.Img .innerImg .image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.Img.img-gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55));
  z-index: 1;
  pointer-events: none;
}
.Img.img-gradient .infoImg {
  z-index: 2;
}
.Img .infoImg {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  width: 100%;
  text-align: right;
  padding: 4px 16px;
  padding-right: 4px;
  font-size: clamp(0.2813rem, -0.0041rem + 1.22vw, 0.75rem);
}
@media (min-width: 992px) {
  .Img .infoImg {
    font-size: clamp(0.25rem, 0.0028rem + 0.4vw, 0.4813rem);
  }
}

/* ========================
  🎭 Stage / Layer（分層進場）
======================== */
.stageWrap {
  position: absolute;
  inset: 0;
}

.stage,
.layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#form1 {
  font-size: 1rem;
}

.copyright {
  font-size: 0.8rem;
  display: block;
}
@media (max-width: 991px) {
  .copyright {
    padding-bottom: 74px;
  }
}/*# sourceMappingURL=main.css.map */