/* generated from src/common.css by _design/tools/build_css.py — 編集は src/ 側で */
/* ==========================================================================
   ALVIA HOME common
   単位 u：PC(768px〜)=1px、SP(〜767px)=100vw/390（XD SP390 の 1px）
   数値は XD（ALVIAHOME_pc_1400px.xd / ALVIAHOME_sp_390px.xd）の座標から算出
   ========================================================================== */
:root {
  --u: 1px;
  --c-text: #2c2321;
  --c-dark: #2c2321;
  --c-menu: #473f3e;
  --c-gray: #e5e7e8;
  --c-cta: #b4b4b4;
  --c-line: #878787;
  --c-accent: #00a8cd;
  --f-ja: "source-han-sans-japanese", "Noto Sans JP", "Source Han Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --f-en: "widescreen", "Widescreen", "Montserrat", "source-han-sans-japanese", "Noto Sans JP", sans-serif; /* 欧文の行の中の和文（坪・階建て等）も源ノ角ゴシック（U41） */
  --header-h: calc(80 * var(--u));
}
@media (max-width: 767px) {
  :root {
    --u: calc(100vw / 390);
    --header-h: calc(75 * var(--u));
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--f-ja);
  font-weight: 400;
  /* XD はフォントのカーニング（和文の仮名の組み合わせも）をかける。Chrome は和文では既定でかけないため明示（2026-10-28 U40：
     SP 本文が XD より右へ 1〜2px ずれていた原因。指定後、XD アプリ書き出しと文字位置のずれ 0） */
  font-kerning: normal; font-feature-settings: "kern" 1;
  color: var(--c-text);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: none; }
picture img { width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p { font-weight: inherit; font-size: inherit; }
.en { font-family: var(--f-en); }
.tight { letter-spacing: -0.2em; }
.u-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) { .pc { display: none !important; } }
@media (min-width: 768px) { .sp { display: none !important; } }
body.is-menu-open { overflow: hidden; }

/* ---------- header ---------- */
.l-header {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: 100%; height: calc(80 * var(--u));
  background: var(--c-dark);
  transition: transform .3s ease-out;
}
/* FV・ページの一番上では隠し、スクロールしたら表示（2026-10-27 RYO「まずFVやページの一番上のときは隠す／スクロールしたら表示」）。
   クラスの付け外しは site-header.php 直後のインライン script と main.js。キーボードでヘッダー内に移動したときは表示する */
.l-header.is-hidden { transform: translateY(-100%); }
.l-header.is-hidden:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) { .l-header { transition: none; } }
.l-header__inner { position: relative; max-width: 1400px; height: 100%; margin: 0 auto; }
.l-header__logo { position: absolute; left: calc(37.4 * var(--u)); top: calc(45.8 * var(--u)); width: calc(181.641 * var(--u)); }
.l-header__logo img { width: 100%; height: auto; }
.l-header__nav li a {
  position: absolute; top: calc(41.27 * var(--u));
  padding-left: calc(14.4 * var(--u));
  font-size: calc(12 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0.1em; color: #fff; white-space: nowrap;
  transition: opacity .3s;
}
.l-header__nav li a:hover { opacity: .6; }
.l-header__nav .plus { position: absolute; left: calc(-0.5 * var(--u)); top: calc(10.53 * var(--u)); width: calc(7.382 * var(--u)); height: calc(7.382 * var(--u)); }
.l-header__nav li:nth-child(1) a { left: calc(389.9 * var(--u)); }
.l-header__nav li:nth-child(2) a { left: calc(502.3 * var(--u)); }
.l-header__nav li:nth-child(3) a { left: calc(640.8 * var(--u)); }
.l-header__nav li:nth-child(4) a { left: calc(779.2 * var(--u)); }
.l-header__nav li:nth-child(5) a { left: calc(838.7 * var(--u)); }
.l-header__btn {
  position: absolute; top: calc(41 * var(--u)); width: calc(70 * var(--u)); height: calc(24 * var(--u));
  border: calc(0.5 * var(--u)) solid #fff; border-radius: calc(2 * var(--u));
  padding-left: calc(9.5 * var(--u));
  font-size: calc(12 * var(--u)); font-weight: 500; line-height: calc(21.536 * var(--u)); letter-spacing: 0.05em; white-space: nowrap;
  transition: opacity .3s;
}
.l-header__btn:hover { opacity: .7; }
.l-header__btn--req { left: calc(100% - calc(300 * var(--u))); color: #fff; }
/* 「モデルハウス見学」（2026-10-30 先方 変更_1030.pdf p1「変更、リンク先は「モデルハウス一覧」」）。PC の XD は更新なし：
   SP の XD 20261030 の変え方（幅 55→98・右端を MENU 側へ 10・資料請求との間隔はそのまま）を PC の大きさ（文字 12px＝SP の1.2倍）に当てはめた：
   幅 70→120・右端を 12 右へ・資料請求も同じ量だけ左へ（262→300） */
.l-header__btn--rsv { left: calc(100% - calc(215 * var(--u))); width: calc(120 * var(--u)); color: var(--c-text); background: #fff; }
.l-header__menu {
  position: absolute; left: calc(100% - calc(64.5 * var(--u))); top: calc(34 * var(--u)); width: calc(40 * var(--u)); height: calc(34 * var(--u));
  text-align: left;
}
.l-header__menu img { position: absolute; left: calc(10.4 * var(--u)); top: 0; width: calc(17.431 * var(--u)); height: calc(9.805 * var(--u)); }
.l-header__menu span {
  position: absolute; left: 0; top: calc(7.15 * var(--u));
  font-family: var(--f-en); font-size: calc(11 * var(--u)); line-height: calc(34 * var(--u)); letter-spacing: 0.05em; color: #fff;
}
/* メニュー文字：1320px 以上は XD どおりの位置。XD どおりの位置のままだと 1180〜1272px で右端（1011.5px）が
   「資料請求」ボタンに重なる（2026-10-26 ディレクター指摘 N8）。1320px で間隔 46.5px */
/* 1190〜1319px はメニュー文字を同じ大きさ・同じ間隔のまま左へずらして表示（2026-10-28 U26 RYO決定 B）。
   ずらす量 = 画面幅 − 1320px（資料請求ボタンとの間隔は 1320px と同じ 47px のまま）。1190px でロゴとの間隔 41px。
   1189px 以下は MENU ボタンから開く
   2026-10-30「モデルハウス見学」でボタンが 38px 左へ広がったため、同じ間隔（ボタンとの間 47・ロゴとの間 41）を保つ範囲が 38px ずつ上へ：
   XD どおりの位置は 1358px 以上・ずらして表示は 1228〜1357px・1227px 以下は MENU ボタンだけ */
@media (min-width: 1228px) and (max-width: 1357px) {
  .l-header__nav li:nth-child(1) a { left: calc(calc(389.9 * var(--u)) + 100% - 1358px); }
  .l-header__nav li:nth-child(2) a { left: calc(calc(502.3 * var(--u)) + 100% - 1358px); }
  .l-header__nav li:nth-child(3) a { left: calc(calc(640.8 * var(--u)) + 100% - 1358px); }
  .l-header__nav li:nth-child(4) a { left: calc(calc(779.2 * var(--u)) + 100% - 1358px); }
  .l-header__nav li:nth-child(5) a { left: calc(calc(838.7 * var(--u)) + 100% - 1358px); }
}
@media (max-width: 1227px) {
  .l-header__nav { display: none; }
}
@media (max-width: 767px) {
  .l-header { height: calc(75 * var(--u)); }
  .l-header__logo { left: calc(14.4 * var(--u)); top: calc(51.4 * var(--u)); width: calc(111 * var(--u)); }
  .l-header__btn {
    top: calc(45 * var(--u)); width: calc(55 * var(--u)); height: calc(19 * var(--u)); border-radius: calc(2 * var(--u));
    padding-left: calc(6 * var(--u));
    font-size: calc(10 * var(--u)); line-height: calc(16.28 * var(--u));
  }
  .l-header__btn--req { left: calc(167 * var(--u)); } /* XD 20261030 */
  .l-header__btn--rsv { left: calc(232 * var(--u)); width: calc(98 * var(--u)); }
  .l-header__menu { left: calc(345 * var(--u)); top: calc(41.7 * var(--u)); width: calc(36 * var(--u)); height: calc(30 * var(--u)); }
  .l-header__menu img { left: calc(8.1 * var(--u)); width: calc(13.713 * var(--u)); height: calc(7.714 * var(--u)); }
  .l-header__menu span { top: calc(5.25 * var(--u)); font-size: calc(9 * var(--u)); line-height: calc(28 * var(--u)); }
}

/* ---------- global menu ---------- */
.c-gmenu {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 100%; height: calc(386 * var(--u));
  background: var(--c-menu); color: #fff;
  transform: translateY(-100%);
  transition: transform .4s ease-out, visibility 0s .4s;
  visibility: hidden;
}
.c-gmenu.is-open { transform: none; visibility: visible; transition: transform .4s ease-out; }
.c-gmenu__inner { position: relative; max-width: 1400px; height: 100%; margin: 0 auto; }
.c-gmenu__logo { position: absolute; left: calc(37.4 * var(--u)); top: calc(45.8 * var(--u)); width: calc(181.641 * var(--u)); }
.c-gmenu__logo img { width: 100%; height: auto; }
.c-gmenu__close { position: absolute; left: calc(100% - calc(64.5 * var(--u))); top: calc(34 * var(--u)); width: calc(40 * var(--u)); height: calc(34 * var(--u)); text-align: left; }
.c-gmenu__close img { position: absolute; left: calc(9.9 * var(--u)); top: calc(-0.5 * var(--u)); width: calc(18.431 * var(--u)); height: calc(10.805 * var(--u)); }
.c-gmenu__close span {
  position: absolute; left: 0; top: calc(7.15 * var(--u));
  font-family: var(--f-en); font-size: calc(11 * var(--u)); line-height: calc(34 * var(--u)); letter-spacing: 0.05em;
}
.c-gmenu__item a {
  position: absolute; display: block;
  font-size: calc(16 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0.15em; white-space: nowrap;
  transition: opacity .3s;
}
.c-gmenu__item a:hover { opacity: .6; }
.c-gmenu__item .plus { position: absolute; left: calc(-18.9 * var(--u)); top: calc(10.28 * var(--u)); width: calc(7.382 * var(--u)); height: calc(7.382 * var(--u)); }
.c-gmenu__item--1 a { left: calc(267.3 * var(--u)); top: calc(141.02 * var(--u)); }
.c-gmenu__item--2 a { left: calc(267.3 * var(--u)); top: calc(186.02 * var(--u)); }
.c-gmenu__item--3 a { left: calc(267.3 * var(--u)); top: calc(230.02 * var(--u)); }
.c-gmenu__item--4 a { left: calc(497.3 * var(--u)); top: calc(141.02 * var(--u)); }
.c-gmenu__item--5 a { left: calc(497.3 * var(--u)); top: calc(185.02 * var(--u)); letter-spacing: 0.05em; }
.c-gmenu__item--6 a { left: calc(775.3 * var(--u)); top: calc(141.02 * var(--u)); }
.c-gmenu__item--7 a { left: calc(775.3 * var(--u)); top: calc(183.4 * var(--u)); }
.c-gmenu__item--7 .en { font-family: var(--f-en); }
.c-gmenu__item--7 .plus { top: calc(10.4 * var(--u)); }
.c-gmenu__btn {
  position: absolute; left: calc(1040.1 * var(--u)); width: calc(169 * var(--u)); height: calc(32 * var(--u)); /* 幅 111→169：XD 20261030 MENU「変更・バランス調整」 */
  border: calc(0.5 * var(--u)) solid #fff;
  padding-left: calc(40.2 * var(--u));
  font-size: calc(14 * var(--u)); line-height: calc(28.8 * var(--u)); letter-spacing: 0.05em; white-space: nowrap;
  transition: opacity .3s;
}
.c-gmenu__btn:hover { opacity: .7; }
.c-gmenu__btn img { position: absolute; }
.c-gmenu__btn--req { top: calc(143 * var(--u)); padding-left: calc(57.7 * var(--u)); letter-spacing: 0.5em; } /* XD 20261030：「資料請求」は字間 500・中央揃え（文字の左端＝枠の左から 58.2） */
.c-gmenu__btn--req img { left: calc(11.8 * var(--u)); top: calc(9.4 * var(--u)); width: calc(18.3 * var(--u)); height: calc(12.2 * var(--u)); }
.c-gmenu__btn--rsv { top: calc(187 * var(--u)); }
.c-gmenu__btn--rsv img { left: calc(13 * var(--u)); top: calc(7.1 * var(--u)); width: calc(15.9 * var(--u)); height: calc(14.7 * var(--u)); }
.c-gmenu__copy { position: absolute; left: calc(39 * var(--u)); top: calc(308.85 * var(--u)); font-family: var(--f-en); font-size: calc(9 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0.05em; white-space: nowrap; }
.c-gmenu__privacy { position: absolute; left: calc(37 * var(--u)); top: calc(327.64 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0.05em; }
@media (max-width: 1039px) and (min-width: 768px) {
  /* TB：PCメニューの4列を左寄せで詰める */
  .c-gmenu__item--1 a, .c-gmenu__item--2 a, .c-gmenu__item--3 a { left: calc(60 * var(--u)); }
  .c-gmenu__item--4 a, .c-gmenu__item--5 a { left: calc(290 * var(--u)); }
  .c-gmenu__item--6 a, .c-gmenu__item--7 a { left: calc(568 * var(--u)); }
  .c-gmenu { height: calc(466 * var(--u)); }
  .c-gmenu__btn { left: calc(60 * var(--u)); }
  .c-gmenu__btn--req { top: calc(283 * var(--u)); }
  .c-gmenu__btn--rsv { top: calc(283 * var(--u)); left: calc(244 * var(--u)); }
  .c-gmenu__copy { top: calc(388.85 * var(--u)); }
  .c-gmenu__privacy { top: calc(407.64 * var(--u)); }
}
@media (max-width: 767px) {
  .c-gmenu {
    height: 100vh; height: 100dvh; min-height: calc(844 * var(--u));
    transform: none; opacity: 0;
    transition: opacity .3s, visibility 0s .3s;
  }
  .c-gmenu.is-open { opacity: 1; transition: opacity .3s; }
  .c-gmenu__logo { left: calc(14.4 * var(--u)); top: calc(51.4 * var(--u)); width: calc(111 * var(--u)); }
  .c-gmenu__close { left: calc(345 * var(--u)); top: calc(41.7 * var(--u)); width: calc(36 * var(--u)); height: calc(30 * var(--u)); }
  .c-gmenu__close img { left: calc(7.6 * var(--u)); width: calc(14.713 * var(--u)); height: calc(8.714 * var(--u)); }
  .c-gmenu__close span { top: calc(5.25 * var(--u)); font-size: calc(9 * var(--u)); line-height: calc(28 * var(--u)); }
  .c-gmenu__item a { left: calc(61 * var(--u)) !important; }
  .c-gmenu__item .plus { left: calc(-19 * var(--u)); }
  .c-gmenu__item--1 a { top: calc(124.02 * var(--u)); }
  .c-gmenu__item--2 a { top: calc(169.02 * var(--u)); }
  .c-gmenu__item--3 a { top: calc(213.02 * var(--u)); }
  .c-gmenu__item--4 a { top: calc(258.02 * var(--u)); }
  .c-gmenu__item--5 a { top: calc(302.02 * var(--u)); }
  .c-gmenu__item--6 a { top: calc(347.02 * var(--u)); }
  .c-gmenu__item--7 a { top: calc(389.4 * var(--u)); }
  .c-gmenu__btn { left: calc(181 * var(--u)); }
  .c-gmenu__btn--req { top: calc(471.5 * var(--u)); }
  .c-gmenu__btn--rsv { top: calc(515.5 * var(--u)); }
  .c-gmenu__copy { left: calc(45 * var(--u)); top: calc(759.85 * var(--u)); }
  .c-gmenu__privacy { left: calc(43 * var(--u)); top: calc(778.64 * var(--u)); }
}

/* ---------- 詳しくボタン ---------- */
.c-more {
  position: relative; display: block; overflow: hidden;
  width: calc(200 * var(--u)); height: calc(36 * var(--u)); margin: 0 auto;
  border-radius: calc(5 * var(--u)); background: var(--c-dark); color: #fff;
  isolation: isolate;
}
.c-more::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: -1;
  width: calc(245.8 * var(--u)); height: calc(36 * var(--u));
  background: rgba(255, 255, 255, .5);
  clip-path: polygon(0 0, 100% 0, 86.25% 100%, 0 100%);
  transform: translateX(calc(-242.8 * var(--u)));
  transition: transform .3s ease-out;
}
.c-more:hover::before, .c-more:focus-visible::before { transform: translateX(calc(-14.8 * var(--u))); }
.c-more::after { /* 区切り線＋三角 */
  content: ""; position: absolute; left: calc(164.5 * var(--u)); top: calc(3 * var(--u)); width: calc(1 * var(--u)); height: calc(30 * var(--u)); background: #fff;
}
.c-more__label {
  position: absolute; left: calc(62 * var(--u)); top: calc(7 * var(--u));
  font-size: calc(15 * var(--u)); font-weight: 500; line-height: calc(22 * var(--u)); letter-spacing: 0.05em; white-space: nowrap;
}
.c-more__label::after {
  content: ""; position: absolute; left: calc(118 * var(--u)); top: calc(5 * var(--u)); width: calc(10 * var(--u)); height: calc(12 * var(--u));
  background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.c-more--line { border: calc(1 * var(--u)) solid #fff; }
.c-more--line::after { left: calc(163.5 * var(--u)); top: calc(2 * var(--u)); }
.c-more--line .c-more__label { left: calc(61 * var(--u)); top: calc(6 * var(--u)); }

/* ---------- CTA ---------- */
.c-cta {
  position: relative; height: calc(359.4 * var(--u)); overflow: hidden; background: var(--c-cta); color: #fff;
}
/* 写真＋グレー #b4b4b4 の乗算（XD「長方形 21」blendMode: multiply）。乗算済みの画像を cover で敷く（2026-10-27 F1） */
.c-cta__bg { position: absolute; inset: 0; }
.c-cta__bg picture, .c-cta__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-cta__inner {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: calc(24 * var(--u));
  padding-top: calc(107.4 * var(--u));
}
.c-cta__title { width: 100%; }
.c-cta__title img { width: calc(621.4 * var(--u)); height: auto; margin: 0 auto; }
.c-cta__btn {
  position: relative; display: block; width: calc(308 * var(--u)); height: calc(60 * var(--u)); margin-top: calc(55.7 * var(--u));
  border: calc(1 * var(--u)) solid #fff;
  padding: calc(12.78 * var(--u)) 0 0 calc(3 * var(--u)); text-align: center;
  font-size: calc(20 * var(--u)); font-weight: 500; line-height: calc(30 * var(--u)); letter-spacing: 0.15em;
  transition: background-color .3s;
}
.c-cta__btn:hover { background: rgba(255, 255, 255, .2); }
.c-cta__btn img { position: absolute; }
.c-cta__btn--req img { left: calc(22.3 * var(--u)); top: calc(20 * var(--u)); width: calc(27 * var(--u)); height: calc(18 * var(--u)); }
/* XD 20261030（先方「変更・バランス調整」）：「資料請求」字間 500・文字の中心 x=215、「モデルハウス見学」字間 200・中心 x=217（枠の中心は 195）。
   文字の中心を枠の中心から右へ 20・22 ずらす＝左の余白を (ずらす量＋字間の半分)×2 にする（CSS の字間は最後の文字の後ろにも付くため） */
.c-cta__btn--req { padding-left: calc(50 * var(--u)); letter-spacing: 0.5em; }
.c-cta__btn--rsv { padding-left: calc(48 * var(--u)); letter-spacing: 0.2em; }
.c-cta__btn--rsv img { left: calc(20.7 * var(--u)); top: calc(16.3 * var(--u)); width: calc(27.5 * var(--u)); height: calc(25.4 * var(--u)); }
@media (max-width: 767px) {
  .c-cta { height: calc(418 * var(--u)); }
  .c-cta__inner { display: block; padding-top: calc(49 * var(--u)); }
  .c-cta__title img { width: calc(199.3 * var(--u)); margin: 0 0 0 calc(25.5 * var(--u)); }
  .c-cta__btn { margin: calc(51.3 * var(--u)) 0 0 calc(41 * var(--u)); }
  .c-cta__btn + .c-cta__btn { margin-top: calc(19 * var(--u)); }
}

/* ---------- footer ---------- */
.l-footer { position: relative; }
.l-footer__inner { position: relative; width: calc(344 * var(--u)); height: calc(400.3 * var(--u)); margin: 0 auto; }
.l-footer__nav { position: absolute; left: 0; top: calc(68.4 * var(--u)); display: flex; }
.l-footer__col--2 { position: absolute; left: calc(175 * var(--u)); top: 0; }
.l-footer__nav li { font-size: calc(14 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0.05em; white-space: nowrap; }
.l-footer__nav a { transition: opacity .3s; }
.l-footer__nav a:hover { opacity: .6; }
.l-footer__btns { display: none; }
.l-footer__logo { position: absolute; left: calc(4.4 * var(--u)); top: calc(231.6 * var(--u)); width: calc(338.6 * var(--u)); }
.l-footer__logo img { width: 100%; height: auto; }
.l-footer__copy { position: absolute; left: calc(3 * var(--u)); top: calc(329.4 * var(--u)); font-family: var(--f-en); font-size: calc(9 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0.05em; white-space: nowrap; }
.l-footer__privacy { position: absolute; left: calc(1 * var(--u)); top: calc(348.24 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0.05em; white-space: nowrap; }
.l-footer__band { position: relative; height: calc(244 * var(--u)); overflow: hidden; }
.l-footer__band img { position: absolute; left: 50%; bottom: 0; width: max(100%, 1400px); max-width: none; height: auto; transform: translateX(-50%); }
@media (min-width: 1401px) {
  .l-footer__band { height: calc(100vw * 244 / 1400); }
}
@media (max-width: 767px) {
  .l-footer__inner { width: 100%; height: calc(441.5 * var(--u)); }
  .l-footer__nav { left: calc(20 * var(--u)); top: calc(55.9 * var(--u)); }
  .l-footer__btns { display: block; }
  .l-footer__btn {
    position: absolute; left: calc(193 * var(--u)); width: calc(169 * var(--u)); height: calc(32 * var(--u)); /* XD 20261030「変更・バランス調整」 */
    border: calc(0.5 * var(--u)) solid var(--c-text);
    padding-left: calc(40.2 * var(--u));
    font-size: calc(14 * var(--u)); line-height: calc(28.8 * var(--u)); letter-spacing: 0.05em; white-space: nowrap;
  }
  .l-footer__btn:nth-child(1) { top: calc(175.5 * var(--u)); padding-left: calc(59.7 * var(--u)); letter-spacing: 0.5em; } /* 「資料請求」字間 500（文字の左端＝枠の左から 60.2） */
  .l-footer__btn:nth-child(2) { top: calc(219.5 * var(--u)); }
  .l-footer__btn img { position: absolute; }
  .l-footer__btn:nth-child(1) img { left: calc(11.8 * var(--u)); top: calc(9.4 * var(--u)); width: calc(18.3 * var(--u)); height: calc(12.2 * var(--u)); }
  .l-footer__btn:nth-child(2) img { left: calc(13 * var(--u)); top: calc(7.1 * var(--u)); width: calc(15.9 * var(--u)); height: calc(14.7 * var(--u)); }
  .l-footer__logo { left: calc(23.4 * var(--u)); top: calc(291.5 * var(--u)); }
  .l-footer__copy { left: calc(22 * var(--u)); top: calc(389.35 * var(--u)); }
  .l-footer__privacy { left: calc(20 * var(--u)); top: calc(408.14 * var(--u)); }
  .l-footer__band { height: calc(106 * var(--u)); }
  .l-footer__band img { width: 100%; }
}

/* XD の文字ごとのトラッキング（1/1000em）。lsm200 = -200 */
.lsm300 { letter-spacing: -0.3em; }
.lsm200 { letter-spacing: -0.2em; }
.lsm150 { letter-spacing: -0.15em; }
.lsm100 { letter-spacing: -0.1em; }
.lsm50 { letter-spacing: -0.05em; }
.ls0 { letter-spacing: 0; }
.ls50 { letter-spacing: 0.05em; }
.ls100 { letter-spacing: 0.1em; }

/* ---------- 下層ページ共通 ---------- */
.pg { position: relative; }
.c-label { padding-top: calc(80 * var(--u)); margin-left: calc(50% - calc(500 * var(--u))); width: calc(170 * var(--u)); }
.c-label img { width: calc(170 * var(--u)); height: auto; }
/* ラベル（アイコン＋文字SVG）：PCデザインのないページ用 */
.c-label--svg { position: relative; }
.c-label__box { position: relative; display: block; height: calc(21 * var(--u)); }
.c-label__box img:first-child { position: absolute; left: 0; top: 0; width: calc(37 * var(--u)); height: calc(21 * var(--u)); }
.c-label__box :is(img, .c-chars):last-child { position: absolute; left: calc(51 * var(--u)); top: calc(4.1 * var(--u)); height: auto; }
.c-label__en { position: absolute; left: calc(51 * var(--u)); bottom: calc(-32.8 * var(--u)); font-family: var(--f-en); font-size: calc(12 * var(--u)); line-height: calc(28 * var(--u)); white-space: nowrap; }
.c-icon { display: block; width: calc(37 * var(--u)); height: calc(21 * var(--u)); }
.c-lead18 { position: relative; top: calc(0.5 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(30 * var(--u)); letter-spacing: 0.05em; }
.c-bullet { position: relative; top: calc(0.6 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; line-height: calc(28 * var(--u)); }
.c-bullet__dot { position: relative; top: calc(-2 * var(--u)); margin-right: calc(6 * var(--u)); font-size: calc(8 * var(--u)); line-height: 0; }
.c-vhead { position: relative; }
.c-vhead__title img { height: auto; margin: 0 auto; }
.c-vhead__side {
  position: absolute; left: calc(50% + calc(149 * var(--u))); top: calc(70.8 * var(--u)); width: calc(188 * var(--u));
  font-size: calc(13 * var(--u)); font-weight: 500; line-height: calc(28 * var(--u));
}
.c-vhead__side::after { content: ""; position: absolute; left: 0; top: calc(29.9 * var(--u)); width: calc(188 * var(--u)); height: calc(1 * var(--u)); background: #2b2320; }
.xd-block { display: block; overflow: visible; }
/* 線のボタン（XD：180×30・線1px・区切り線＋三角。よくある質問「価格とプロセス」／ALVIA HOMEについて「来場予約フォーム」）
   ホバーは TOP の「詳しく」と同じ白の斜め帯。文字の左位置は --lb-x（XD の位置が文言ごとに違うため） */
.c-linebtn {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  width: calc(180 * var(--u)); height: calc(30 * var(--u)); border: calc(1 * var(--u)) solid var(--c-text); border-radius: calc(5 * var(--u)); color: var(--c-text);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpolygon points='0,0 9,5 0,10' fill='%232c2321'/%3E%3C/svg%3E") no-repeat;
  background-position: calc(162 * var(--u)) calc(9 * var(--u)); background-size: calc(9 * var(--u)) calc(10 * var(--u));
}
.c-linebtn::before {
  content: ""; position: absolute; left: calc(11.67 * var(--u)); top: calc(-1 * var(--u)); z-index: -1; width: calc(204.84 * var(--u)); height: calc(30 * var(--u));
  background: rgba(255, 255, 255, .5); clip-path: polygon(0 0, 100% 0, 86.26% 100%, 0 100%);
  transform: translateX(calc(-216.51 * var(--u))); transition: transform .3s ease-out;
}
.c-linebtn:hover::before, .c-linebtn:focus-visible::before { transform: translateX(calc(-37.84 * var(--u))); }
.c-linebtn::after { content: ""; position: absolute; left: calc(149.83 * var(--u)); top: calc(1.5 * var(--u)); width: calc(1 * var(--u)); height: calc(25 * var(--u)); background: var(--c-text); }
.c-linebtn__label {
  position: absolute; left: var(--lb-x, calc(31 * var(--u))); top: calc(3.8 * var(--u));
  font-size: calc(12 * var(--u)); font-weight: 500; line-height: calc(18 * var(--u)); letter-spacing: 0.05em; white-space: nowrap;
}
@media (max-width: 767px) {
  /* 下層ページの上の余白 calc(75 * var(--u)) は撤去（2026-10-27）。ヘッダーはページ最上部では隠れるため、XD どおり 0 から始める */
  .c-label { padding-top: calc(43 * var(--u)); margin-left: calc(20 * var(--u)); }
  .c-vhead__title img { margin: 0 0 0 calc(20 * var(--u)); }
  .c-vhead__side { left: calc(182 * var(--u)); }
}

/* 0.5px の線（XD：ボタンの枠・線の内側揃え）。Chromium は 1px 未満の border を 1px に切り上げ、線が太く・内側にずれるため、
   border は使わず内側の影で線を描き、本来の 0.5px の線の分だけ中身を右下へ寄せる（文字は text-indent・padding-top、アイコンは translate）。
   等倍の画面：1px・白50%（XD アプリの画像の色 163,159,159 と同じ）／高精細の画面：0.5px の白（2026-10-26〜27 ディレクター指摘 U19） */
.l-header__btn, .c-gmenu__btn { border-width: 0; padding-top: 0.5px; text-indent: 0.5px; box-shadow: inset 0 0 0 0.5px #fff; }
.c-gmenu__btn img { translate: 0.5px 0.5px; }
@media (max-resolution: 1.99dppx) {
  .l-header__btn, .c-gmenu__btn { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
  .l-header__btn--rsv { box-shadow: inset 0 0 0 1px #fff; }
}
@media (max-width: 767px) {
  .l-footer__btn { border-width: 0; padding-top: 0.5px; text-indent: 0.5px; box-shadow: inset 0 0 0 0.5px var(--c-text); }
  .l-footer__btn img { translate: 0.5px 0.5px; }
}
@media (max-width: 767px) and (max-resolution: 1.99dppx) {
  .l-footer__btn { box-shadow: inset 0 0 0 1px rgba(44, 35, 33, .5); }
}

/* 画像の比率（helpers.php の aa_img / aa_pic が正確な比率を --ar / --ar-sp で渡す）。
   auto を付けているので読み込み後は画像そのものの比率。:where() で詳細度0＝各ページの aspect-ratio 指定が優先 */
:where(img[style*="--ar"]) { aspect-ratio: auto var(--ar); }
@media (max-width: 767px) {
  :where(picture img[style*="--ar-sp"]) { aspect-ratio: auto var(--ar-sp); }
}

/* Adobe Fonts の Widescreen（Web 版）は、XD で使われているデスクトップ版より文字の基準線が 0.032em 下に来る
   （2026-10-28 実測：1000px で Web 300・500 が 2.390／2.389、デスクトップ Light・Medium が 2.357）。
   Widescreen の行だけ 0.032em 上へ戻して XD の位置に合わせる（和文の中の欧文は和文の基準線にそろうので対象外） */
.l-header__menu span, .c-gmenu__close span, .c-gmenu__copy, .l-footer__copy, .c-label__en,
.fq-mark, .cp-story__num, .pr-card__num, .pf-point__label,
.gl-plan__letter, .gl-plan__spec, .gl-plan__price .num, .gl-card__letter, .gl-card__spec, .gl-card__price .num { translate: 0 -0.032em; }

/* ---------- 見出しの文字を1文字ずつ下から出す（2026-10-28 U44 RYO「1文字ずつ下から出てくるみたいなアニメーションを／TOPのセクション見出しと／下層ページの上の一番大きな見出し／につけたい」） ----------
   参考 open-rise.jp の実測：1文字ごとに 行の文字の高さの110% 下 → 元の位置、透明 → 不透明、1.2秒、ease-out（cubic）、0.04秒ずつずらす。
   隠すのは JavaScript が準備できた見出しだけ（.is-chars-wait）。JavaScript が動かない・止まったときは普通に表示される。
   ページを開いた直後のちらつきを防ぐため、site-header.php の直後で html に .is-chars-pending を付けて見出しを一時的に隠す。
   main.js が 2.5秒以内に引き継がなかったときは、下の aa-chars-failsafe で必ず表示する */
.c-chars { overflow: visible; }
.c-chars .c-char { transform-box: fill-box; }
.is-chars-pending .js-chars .c-chars { opacity: 0; animation: aa-chars-failsafe 0s linear 2.5s forwards; }
@keyframes aa-chars-failsafe { to { opacity: 1; } }
.c-chars.is-chars-wait .c-char { opacity: 0; transform: translateY(var(--cy, 110%)); }
.c-chars.is-chars-wait.is-chars-in .c-char {
  opacity: 1; transform: none;
  transition: opacity 1.2s cubic-bezier(.215, .61, .355, 1), transform 1.2s cubic-bezier(.215, .61, .355, 1);
  transition-delay: calc(var(--ci, 0) * .04s);
}
@media print {
  .is-chars-pending .js-chars .c-chars, .c-chars.is-chars-wait .c-char { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- 横にスクロールする図の下のスライダー（2026-10-30 先方・U66。main.js の .js-xbar）。スマホだけ（TB・PC は図を縮めて全部見せている）
   高さ 20 の帯の中に 2px の線と 4px のつまみ。下の余白に重ねて置き、下の要素の位置は変えない ---------- */
.c-xbar { display: none; }
@media (max-width: 767px) {
  .c-xbar { display: block; position: relative; height: calc(20 * var(--u)); margin: calc(6 * var(--u)) calc(20 * var(--u)) calc(-26 * var(--u)); color: var(--c-text); cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
  .c-xbar::before { content: ""; position: absolute; left: 0; right: 0; top: calc(9 * var(--u)); height: calc(2 * var(--u)); border-radius: calc(1 * var(--u)); background: currentColor; opacity: .15; }
  .c-xbar__thumb { position: absolute; left: 0; top: calc(8 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: currentColor; will-change: transform; }
  .c-xbar.is-off { visibility: hidden; }
}

/* ---------- モデルハウスのカード（TOP「Model House」・モデルハウス一覧で共通。2026-10-30 SP の XD 20261030） ----------
   XD：画像 300×300（x=45）→ 画像の下から 39.4 に1行目（13px）の基準線、その 28 下に2行目（15px）。次のカードまで 417.9 */
.c-mh-list { display: flex; flex-wrap: wrap; gap: calc(50 * var(--u)) calc(25 * var(--u)); width: calc(800 * var(--u)); margin-left: auto; margin-right: auto; text-align: left; }
.c-mh { width: calc(250 * var(--u)); }
.c-mh__link { display: block; transition: opacity .3s; }
.c-mh__link:hover { opacity: .75; }
.c-mh__thumb { display: block; }
.c-mh__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.c-mh__name { position: relative; top: calc(-0.1 * var(--u)); margin-top: calc(20.5 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 400; line-height: calc(28 * var(--u)); white-space: pre-wrap; }
.c-mh__catch { position: relative; top: calc(-1.11 * var(--u)); display: block; font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
@media (min-width: 768px) and (max-width: 1023px) {
  .c-mh-list { width: auto; gap: 40px 20px; }
  .c-mh { width: calc((100% - 40px) / 3); }
}
@media (max-width: 767px) {
  .c-mh-list { display: block; width: calc(300 * var(--u)); margin: 0 0 0 calc(45 * var(--u)); }
  .c-mh { width: calc(300 * var(--u)); min-height: calc(417.9 * var(--u)); }
}