@charset "UTF-8";
/* ========================
  🎨 Design Tokens - Variables
======================== */
/* Theme semantic colors */
/* Brand Primary：Desktop／Mobile 的 page02 子標／內文活文字最暗 5% 像素採樣，
   四組樣本收斂到同一色值（非取自 page02-title.svg 的漸層 stop）。AI 檔
   （景御_電腦+手機版.ai／景御_一頁式網站.ai）皆未附帶 PDF 相容內容，無法讀取
   向量填色，屬來源能力限制，非略過不做；見 docs/LAYOUT-SPEC.md「Brand Color
   量測」。Hover 為案件裁決的衍生值（primary 混入 12% 黑），非獨立量測，僅供
   互動元件使用，不得套用在純文字上。此為 JingYuDaYuan 案件副本的定案，
   不回寫 `_template_onePage` 的共用預設。 */
/* Text Secondary：page05 表單標籤／個資說明／checkbox／聯絡資訊文字的
   最暗像素採樣，8 組跨區域樣本（6 個欄位標籤＋2 行個資說明）收斂到
   #956132，對白對比 5.21:1（過 AA）。與 --color-brand-primary 明顯不同，
   非同一色系，使用者裁決覆寫此 token 而非另建 page05 專屬色票。 */
/* Border Primary：page05 表單欄位／送出按鈕的邊框最暗 30% 像素採樣
   （7 個框體、約 1184 個樣本），收斂到 #e4d8cc，暖色調，與共用預設的
   冷灰 #dee2e6 不同。⚠ 共用 .form-control/.form-select（_foundation.scss）
   目前是寫死的 #ced4da，不讀這個 token，所以只改這裡不會自動生效；
   #page05 另外要 scoped override .form-control 的 border-color 才會
   真的套用，見 style.scss。 */
/* Libraries fixed colors：不隨 Theme 切換。 */
/* v1 migration aliases：案件檔案完成遷移前保留，不是新的正式命名。 */
/* Viewport breakpoints */
/* Font Family */
/* Section Spacing */
/*
  content-edge：內容版心與瀏覽器邊界的預設距離
  section-py：section 上下留白
  如果不需要上下 padding，可用 .section-py--mobile-0 等類別局部去除。
*/
/* Section Spacing - Mobile */
/* Section Spacing - Desktop */
/* Text Block Padding */
/* Layout Pattern */
/* 舊單值 alias；新 layout 應分別使用 X / Y。 */
/* ==========================================================================
  Project stylesheet entry

  只放目前案件的 Theme override、Text Style 與 #pageXX 精準版型。
  共用元件與 utilities 應回到對應的 scss/_*.scss；不得把上一案樣式留在此處。
========================================================================== */
:root {
  --project-name: "景御大苑";
}

/*
  Mobile fixed Nav 的底部保留量。
  共用層 _nav.scss 的預設值不保證吻合本 Nav 的實際高度，短少時 Footer 會被
  蓋住。此處為 Starter 佔位 Nav 的實測值：780 = 101.58px、390 = 51.78px，
  取兩者換算後的較大值。
  ⚠ 更動 Nav 的文字、字級、icon、padding 或排列後，必須重新量測並更新此值。
*/
@media (max-width: 991.98px) {
  :root {
    --site-nav-height: calc(81 * var(--vw-base));
  }
}
/*
  page01 — 影片 Hero。

  高度採 100svh（viewport policy），不是設計稿量測值。page01 是全螢幕影片
  Hero，正式版面以 viewport 為準；來源設計稿（Desktop 終點 y=1157／Mobile
  終點 y=1081）只留存於 docs/LAYOUT-SPEC.md 作為畫布量測證據，不再是正式
  computed height 的驗收基準。刻意用 svh 而非 dvh：pin 動畫需要穩定高度，
  Mobile 瀏覽器工具列收合展開時 dvh 會即時變動，容易讓 pin 抖動；svh 取
  「小視口」固定值，犧牲工具列收合後的滿版，換取 pin 期間的高度穩定。

  page01-txt.svg 在兩個斷點皆水平置中且大致垂直置中，寬度取自量測到的文字墨跡
  範圍（Desktop ≈918、Mobile ≈456），高度依 viewBox 比例（923.8 : 482.9）自動延伸。
*/
#page01.section--hero {
  position: relative;
  overflow: hidden;
  height: 100lvh;
  background-color: var(--color-background-primary);
}

.hero-stage {
  position: absolute;
  inset: 0;
  opacity: 1;
}

.hero-media {
  position: absolute;
  inset: 0;
}
.hero-media__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 1;
}
.hero-title__artwork {
  display: block;
  width: calc(456 * var(--vw-base));
  height: auto;
}
@media (min-width: 992px) {
  .hero-title__artwork {
    width: calc(918 * var(--vw-base));
  }
}

/* Loader 顯示期間先壓住 artwork；Loader 完成後由 hero-motion.js 接手，
   影片 currentTime 達 6 秒才淡入。若 Hero JS 缺件，is-loading 解除後
   此規則自然失效，文字仍可見。 */
body.is-loading #page01 .hero-title {
  opacity: 0;
  visibility: hidden;
}

/*
  page02 — 品牌敘事文字群組（Text Style）

  子標／內文字級與行高非目測估讀：以 Playwright 載入 Noto Serif TC，用實際
  文案字串（子標「景裕建設X常春藤聯盟」「全球No.1地產頂尖學院團隊」／內文
  「為景安 迎來世界」「為當代 鑄典藏之夢」）比對渲染墨寬（advance）與設計稿
  逐欄 ink-density 掃描到的墨寬，回推字級；行距則比對兩行墨跡起點間距（pitch）
  回推。字重為案件裁決，非量測結果：Noto Serif TC 在 300／400 兩個字重下量到
  的墨寬幾乎相同（<0.2% 差），墨寬無法用來區分字重，故 Subtitle 400／
  Description 300 是依文字角色（次要標題 vs 內文）做出的語意定案，不宣稱是
  從 JPG 精確辨識出的原始 weight；若日後取得 Illustrator 可解析資料，應
  重新核對。此量測與定案僅涵蓋 page02；不得假設 page03 的內文角色沿用相同
  數值（page03 內文的明體／黑體歸屬本身尚未定案，見 CASE-BRIEF）。
*/
.text-style-subheading-zh {
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(35 * var(--vw-base));
  line-height: 1.3714285714;
}
@media (min-width: 992px) {
  .text-style-subheading-zh {
    font-size: calc(47 * var(--vw-base));
    line-height: 1.2127659574;
  }
}

/*
  Subheading zh 的 compact 尺寸變體：同一語意角色（次要標題），字級較小。
  page03 子標「家大一點 樹多一點 院美一點」逐項比對 .text-style-subheading-zh
  後，寬度與墨高兩個獨立軸向都測到約 5% 的同向落差（Desktop 墨寬誤差
  4.8%、墨高誤差同向約 5%，皆超出 .text-style-subheading-zh 自身兩行互校
  建立的 <3% 雜訊帶），判定為真實字級差異，不是量測雜訊，見
  docs/LAYOUT-SPEC.md「page03」。Desktop font-size 由寬度校準（44.83px）
  與墨高比值回推（≈45.05px）兩個獨立方法互相佐證後取 45px。Mobile 維持
  與 .text-style-subheading-zh 相同數值（35px，墨寬誤差僅 0.2%，兩者在
  這個斷點統計上無法區分，屬合理巧合，不代表兩個 class 應合併）。
  line-height 比例沿用 .text-style-subheading-zh 的 pitch/font-size 比值
  （page03 子標僅單行，無第二行可獨立校準行距）。
*/
.text-style-subheading-zh-compact {
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(35 * var(--vw-base));
  line-height: 1.3714285714;
}
@media (min-width: 992px) {
  .text-style-subheading-zh-compact {
    font-size: calc(45 * var(--vw-base));
    line-height: 1.2127659574;
  }
}

.text-style-body-zh {
  font-family: var(--font-zh-sans);
  font-weight: 300;
  font-size: calc(30 * var(--vw-base));
  line-height: 1.6;
}
@media (min-width: 992px) {
  .text-style-body-zh {
    font-size: calc(35 * var(--vw-base));
    line-height: 1.5142857143;
  }
}

/*
  標題群組結構（本案尚無共用 .txt-heading 元件，逐案自建，責任切分同全陽案：
  text-style-* 管字體字級，.txt-heading 管群組間距，#pageXX 管定位與顏色）。
  row-gap 為 title→subtitle、subtitle→description 兩段實測間距（Desktop 49／43，
  Mobile 62／53）的平均值，跟隨既有專案慣例採單一群組間距，不逐段分別設定。
*/
.txt-heading {
  display: grid;
  row-gap: calc(58 * var(--vw-base));
  margin: 0;
}
@media (min-width: 992px) {
  .txt-heading {
    row-gap: calc(46 * var(--vw-base));
  }
}

.txt-heading--unit {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.txt-heading > * {
  margin: 0;
}

.txt-heading__artwork img {
  display: block;
  margin-inline: auto;
  width: calc(407 * var(--vw-base));
  height: auto;
}
@media (min-width: 992px) {
  .txt-heading__artwork img {
    width: calc(583 * var(--vw-base));
  }
}

/*
  page02 — 品牌敘事 Section。

  標題為 page02-title.svg artwork（隱藏 h2 承載文字語意，見 index.html）；
  子標／內文為活文字，顏色沿用 --color-brand-primary（見 scss/_tokens.scss
  量測依據）。圖片全出血，不受 .container 邊界限制；--ratio/--ratio-m 保留
  設計稿裁切比例，object-position 依斷點各自的裁切位置設定（Mobile 為量測
  候選值，需視覺覆核，見 docs/LAYOUT-SPEC.md）。Section 高度由內容自然撐高，
  不寫死 height。
*/
#page02.section--brand-story {
  position: relative;
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
  background-color: var(--color-background-primary);
}
#page02.section--brand-story::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  padding-top: 20%;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
}
#page02.section--brand-story .txt-heading__subtitle,
#page02.section--brand-story .txt-heading__description {
  color: var(--color-brand-primary);
}
#page02.section--brand-story .container {
  margin-bottom: calc(84 * var(--vw-base));
}
@media (min-width: 992px) {
  #page02.section--brand-story .container {
    margin-bottom: calc(104 * var(--vw-base));
  }
}
#page02.section--brand-story .img-wrap {
  overflow: hidden;
}
#page02.section--brand-story .img-cover {
  --ratio: 610 / 561;
  --ratio-m: 610 / 561;
  object-position: 39% center;
}
@media (min-width: 992px) {
  #page02.section--brand-story .img-cover {
    --ratio: 1920 / 1045;
    object-position: 50% center;
  }
}

/*
  page03 — 森境敘事（.text-style-lead-zh）

  三行內文的 font-size 兩個斷點都與 .text-style-body-zh 幾乎相同（Playwright
  墨寬校準：Desktop 34.6px vs 既有 35px、Mobile 30.2px vs 既有 30px，差異
  1-2%）；Mobile line-height 與 .text-style-body-zh 完全相同（pitch 48）。
  唯一真正不同的是 Desktop line-height：本文實測 pitch 65（65/35≈1.857），
  比 .text-style-body-zh 的 53（53/35≈1.514）寬 23%，超出量測雜訊帶，
  判定為設計刻意的品牌敘事行距，因此不能整條沿用 .text-style-body-zh，
  獨立建立 .text-style-lead-zh。weight 300 為文字角色語意定案（同
  .text-style-body-zh 的判斷方式），非墨寬辨識結果。
*/
.text-style-lead-zh {
  font-family: var(--font-zh-sans);
  font-weight: 300;
  font-size: calc(30 * var(--vw-base));
  line-height: 1.6;
}
@media (min-width: 992px) {
  .text-style-lead-zh {
    font-size: calc(35 * var(--vw-base));
    line-height: 1.8571428571;
  }
}

/*
  page03 — 森境敘事 Section。

  Desktop 三欄（圖1 | 文字 | 圖2）、Mobile 堆疊（文字 → 圖1+圖2 無縫並排）；
  DOM 順序固定為文字→圖1→圖2，純用 CSS Grid area 重排，不用 order、不重複
  DOM。兩張照片故意不合成單一 .img-wrap 群組：Desktop 需要文字夾在兩張圖
  中間，若 .media-pair 外層要同時吃 Grid item 又要當 Motion target，
  只能靠 `display:contents` 拿掉外層 box，但 GSAP 的 transform/opacity
  在無實體 box 的元素上不可靠；因此改為兩張圖各自是直接 Grid item，
  各自獨立 .img-wrap（Motion target 數＝文字 1＋圖片 2，共 3 個，非巢狀）。

  子標／內文 row-gap 不用 .txt-heading 預設的單一平均值：title→subtitle
  與 subtitle→lead 兩段實測間距差異達 70%（Desktop 51 vs 87），差距太大，
  改用個別 margin-top 精準對應設計稿，不強行平均。

  圖片 object-position 為 cross-correlation 逐張、逐斷點量測（比對設計稿
  裁切區域與原生素材，MSE 用視覺覆核確認非誤判）：img-1（樹冠）Desktop
  ≈50%、Mobile ≈59%；img-2（窗景書桌）兩斷點皆 ≈50%。

  2026-09-07：page04 已依使用者要求整段移除。這裡的 padding-bottom
  （Desktop 162px／Mobile 0px）原本是為了 page03→page04 的接縫留白，
  page04 拿掉後 page03 直接銜接 page05，這個數值未必還是正確的視覺間距，
  但目前沒有新的量測依據可以定案新數值，先保留原樣，留待使用者視覺覆核
  後再調整。padding-top 維持既有 var(--section-py)，未變動。
*/
#page03.section--forest-living {
  padding-top: var(--section-py);
  padding-bottom: 0;
  background-color: var(--color-background-primary);
}
@media (min-width: 992px) {
  #page03.section--forest-living {
    padding-bottom: calc(162 * var(--vw-base));
  }
}
#page03.section--forest-living .story-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text text" "media-start media-end";
  row-gap: calc(86 * var(--vw-base));
}
@media (min-width: 992px) {
  #page03.section--forest-living .story-layout {
    grid-template-columns: calc(457 * var(--vw-base)) 1fr calc(458 * var(--vw-base));
    grid-template-areas: "media-start text media-end";
    align-items: center;
    row-gap: 0;
  }
}
#page03.section--forest-living .txt-heading {
  grid-area: text;
  row-gap: 0;
  padding-inline: var(--content-edge);
}
@media (min-width: 992px) {
  #page03.section--forest-living .txt-heading {
    padding-inline: 0;
  }
}
#page03.section--forest-living .txt-heading__subtitle {
  margin-top: calc(62 * var(--vw-base));
}
@media (min-width: 992px) {
  #page03.section--forest-living .txt-heading__subtitle {
    margin-top: calc(51 * var(--vw-base));
  }
}
#page03.section--forest-living .txt-heading__description {
  margin-top: calc(53 * var(--vw-base));
}
@media (min-width: 992px) {
  #page03.section--forest-living .txt-heading__description {
    margin-top: calc(87 * var(--vw-base));
  }
}
#page03.section--forest-living .txt-heading__subtitle,
#page03.section--forest-living .txt-heading__description {
  color: var(--color-brand-primary);
}
#page03.section--forest-living .story-layout__media--start {
  grid-area: media-start;
}
#page03.section--forest-living .story-layout__media--end {
  grid-area: media-end;
}
#page03.section--forest-living .story-layout__media .img-cover {
  --ratio-m: 305 / 561;
  --ratio: 457 / 565;
}
#page03.section--forest-living .story-layout__media--start .img-cover {
  object-position: 59% center;
}
@media (min-width: 992px) {
  #page03.section--forest-living .story-layout__media--start .img-cover {
    object-position: 50% center;
  }
}
#page03.section--forest-living .story-layout__media--end .img-cover {
  object-position: 50% center;
}

/*
  page05 — 表單／地圖／聯絡資訊（Text Style）

  .text-style-heading-zh：字級由墨寬校準（Desktop 兩行 50.35／45.58px
  平均、Mobile 三行 43.75／46.45／45.45px 平均），line-height 用較緊的
  行內 pitch（Mobile L1→L2 62px、Desktop 唯一一組換行 70px）；Mobile
  「即將公開 敬請期待」前的額外間距（實測 86px，超出單純行高 62px 約
  24px）不透過 line-height 表達，改在 .contact-heading__status 加
  margin-top，理由同 page02/03：不強行用單一 line-height 硬套不均勻的
  分段間距。

  2026-09-07：使用者截圖回報明體（--font-zh-serif）在這些角色上「字體
  跑掉」，裁決全面改用黑體（--font-zh-sans）——影響
  .text-style-subheading-zh／-compact／.text-style-body-zh／
  .text-style-lead-zh／.text-style-heading-zh 這五個角色，字級／
  line-height 等度量數值不變，只換字型家族。.text-style-caption-zh
  本來就是黑體，不受影響，跟其他角色現在字型家族一致。
*/
.text-style-heading-zh {
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(45 * var(--vw-base));
  line-height: 1.3777777778;
}
@media (min-width: 992px) {
  .text-style-heading-zh {
    font-size: calc(48 * var(--vw-base));
    line-height: 1.4583333333;
  }
}

.text-style-caption-zh {
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(20 * var(--vw-base));
  line-height: 1.65;
}
@media (min-width: 992px) {
  .text-style-caption-zh {
    font-size: calc(21 * var(--vw-base));
    line-height: 1.619047619;
  }
}

/*
  page05 — 表單／地圖／聯絡資訊 Section。

  功能型 Section，不只是版面：
  - 表單維持 pending-client（無 action/method，button type="button"，
    不觸發 native submit），後端 endpoint／驗證規則仍是 backend-unconfirmed。
  - reCAPTCHA 用使用者授權的暫用 sitekey，兩斷點共用同一份 DOM，
    不因 Desktop 設計稿沒畫出來就隱藏；不縮放（Mobile 版心夠寬，原生
    尺寸即可）。
  - 地圖使用客戶提供的 Google Maps embed URL，導航連結獨立保留。
  - .contact-form／.map-embed／reCAPTCHA 全部不進 Motion transform
    祖先鏈：表單牽涉鍵盤／觸控互動，地圖與 reCAPTCHA 都是可能因祖先
    transform 而座標判定失準的 iframe/第三方元件。
  - .form-control／.form-select 的邊框與文字色是共用層
    （_foundation.scss）寫死的 #ced4da／#212529，不讀 Theme Token，
    這裡另外 override 成 var(--color-border-primary)／
    var(--color-text-secondary) 才會真的套用新色。
*/
#page05.section--contact {
  padding-top: calc(70 * var(--vw-base));
  padding-bottom: var(--section-py);
  background-color: var(--color-background-primary);
}
@media (min-width: 992px) {
  #page05.section--contact {
    padding-top: calc(129 * var(--vw-base));
  }
}
#page05.section--contact .container {
  --container-max-width: 100%;
  padding-inline: calc(45 * var(--vw-base));
}
@media (min-width: 992px) {
  #page05.section--contact .container {
    --container-max-width: calc(1707 * var(--vw-base));
    padding-inline: 0;
  }
}
#page05.section--contact .txt-heading {
  margin-bottom: calc(81 * var(--vw-base));
}
@media (min-width: 992px) {
  #page05.section--contact .txt-heading {
    margin-bottom: calc(184 * var(--vw-base));
  }
}
#page05.section--contact h2 {
  color: var(--color-brand-primary);
}
#page05.section--contact .contact-heading__keep {
  white-space: nowrap;
}
#page05.section--contact .contact-heading__status {
  margin-top: calc(20 * var(--vw-base));
}
@media (min-width: 992px) {
  #page05.section--contact .contact-heading__status {
    margin-top: 0;
  }
}
#page05.section--contact .contact-form {
  display: block;
}
#page05.section--contact .contact-form__note {
  color: var(--color-text-secondary);
  margin: 0 0 calc(24 * var(--vw-base));
}
#page05.section--contact .contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: calc(22 * var(--vw-base));
  margin-bottom: calc(23 * var(--vw-base));
}
@media (min-width: 992px) {
  #page05.section--contact .contact-form__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(21 * var(--vw-base));
    row-gap: calc(23 * var(--vw-base));
  }
}
@media (min-width: 992px) {
  #page05.section--contact .contact-form__field--full {
    grid-column: 1/-1;
  }
}
#page05.section--contact .contact-form__field .form-control {
  border-color: var(--color-border-primary);
  color: var(--color-text-secondary);
  background: var(--color-background-primary);
}
#page05.section--contact .contact-form__field .form-control::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}
@media (max-width: 991.98px) {
  #page05.section--contact .form-control,
  #page05.section--contact .form-select {
    font-size: max(16px, calc(14 * var(--vw-base)));
  }
}
#page05.section--contact .contact-form__verify {
  display: grid;
  grid-template-areas: "captcha" "consent";
  row-gap: calc(20 * var(--vw-base));
  margin-bottom: calc(39 * var(--vw-base));
}
@media (min-width: 992px) {
  #page05.section--contact .contact-form__verify {
    grid-template-areas: "consent captcha";
    grid-template-columns: 1fr 1fr;
    column-gap: calc(21 * var(--vw-base));
    align-items: start;
    margin-bottom: calc(76 * var(--vw-base));
  }
}
#page05.section--contact .contact-form__captcha {
  grid-area: captcha;
}
#page05.section--contact .contact-form__consent {
  grid-area: consent;
  color: var(--color-text-secondary);
}
#page05.section--contact .contact-form__consent p,
#page05.section--contact .contact-form__consent ol {
  margin: 0;
}
#page05.section--contact .contact-form__consent ol {
  padding-inline-start: 1.2em;
}
#page05.section--contact .contact-form__agree {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--vw-base));
  margin-top: calc(16 * var(--vw-base));
  cursor: pointer;
}
#page05.section--contact .contact-form__agree .form-check-input {
  float: none;
  margin: 0;
}
#page05.section--contact .contact-form__policy {
  display: block;
  margin-top: calc(8 * var(--vw-base));
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
#page05.section--contact .contact-form__submit {
  display: block;
  width: 100%;
  padding: calc(23 * var(--vw-base)) calc(48 * var(--vw-base));
  border: 1px solid var(--color-brand-primary);
  background: transparent;
  color: var(--color-brand-primary);
  font-family: var(--font-zh-sans);
  font-size: calc(20 * var(--vw-base));
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
#page05.section--contact .contact-form__submit:hover {
  background: var(--color-brand-primary);
  color: var(--color-fixed-white);
  border-color: var(--color-brand-primary-hover);
}
@media (min-width: 992px) {
  #page05.section--contact .contact-form__submit {
    width: max-content;
    margin-inline: auto;
    padding: calc(23 * var(--vw-base)) calc(104 * var(--vw-base));
  }
}
#page05.section--contact .contact-info {
  margin-top: calc(105 * var(--vw-base));
  display: grid;
  row-gap: calc(30 * var(--vw-base));
}
@media (min-width: 992px) {
  #page05.section--contact .contact-info {
    margin-top: calc(153 * var(--vw-base));
    grid-template-columns: calc(804 * var(--vw-base)) 1fr;
    column-gap: calc(53 * var(--vw-base));
    align-items: center;
  }
}
#page05.section--contact .contact-info__map {
  aspect-ratio: 610/364;
  background: var(--color-background-secondary);
  overflow: hidden;
}
@media (min-width: 992px) {
  #page05.section--contact .contact-info__map {
    aspect-ratio: 804/483;
  }
}
#page05.section--contact .contact-info__map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#page05.section--contact .contact-info__list {
  display: grid;
  row-gap: calc(30 * var(--vw-base));
  color: var(--color-text-secondary);
}
#page05.section--contact .contact-info__list a {
  color: inherit;
}
#page05.section--contact .contact-info__row {
  padding: calc(20 * var(--vw-base)) calc(24 * var(--vw-base));
  border: 1px solid var(--color-border-primary);
}
#page05.section--contact .contact-info__row dt {
  display: inline;
  font-weight: 500;
}
#page05.section--contact .contact-info__row dd {
  display: inline;
  margin: 0;
}
#page05.section--contact .contact-info__row dd::before {
  content: "｜";
}
#page05.section--contact .contact-info__logo {
  display: inline-block;
  width: auto;
  height: 1em;
  aspect-ratio: 19.3/17.3;
  vertical-align: -0.15em;
  margin: 0 calc(6 * var(--vw-base)) 0 calc(4 * var(--vw-base));
}