/* generated from src/about.css by _design/tools/build_css.py — 編集は src/ 側で */
/* ==========================================================================
   ALVIA HOMEについて（XD：SP 390×4840 ／ PC はデザインなし：PC3ページの寸法ルールで制作）
   ========================================================================== */
/* ---------- PC（制作部が PC3ページのルールで構成：ラベル x200/y80・本文カラム 800） ---------- */
.p-about .l-main { background: #4b4442; }
.ab-dark { padding-bottom: calc(100 * var(--u)); background: #4b4442; color: #fff; }
.pg-about .c-label__box :is(img, .c-chars):last-child { top: calc(6.7 * var(--u)); width: calc(194.7 * var(--u)); }
.ab-h1 { margin: calc(95 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); }
.ab-h1 :is(img, .c-chars) { width: calc(321.7 * var(--u)); height: auto; }

.ab-sec, .ab-models__group { width: calc(800 * var(--u)); margin-left: auto; margin-right: auto; }
.ab-models > .ab-tag { margin-left: calc(50% - calc(400 * var(--u))); }
.ab-sec--brand { margin-top: calc(116.3 * var(--u)); }
.ab-sec--area { margin-top: calc(70.5 * var(--u)); }
.ab-sec--builders { margin-top: calc(92.5 * var(--u)); }
.ab-sec--company { margin-top: calc(70.5 * var(--u)); }

.ab-tag {
  width: calc(155 * var(--u)); height: calc(27 * var(--u)); padding-left: 0.1em; background: rgba(255, 255, 255, .509104); color: var(--c-text); text-align: center;
  font-size: calc(15 * var(--u)); font-weight: 400; line-height: calc(28 * var(--u)); letter-spacing: 0.1em; white-space: nowrap;
}
.ab-tag > span { position: relative; top: calc(-0.96 * var(--u)); }
.ab-tag--dark { width: calc(246 * var(--u)); background: #4b4442; color: #fff; }
.ab-text { position: relative; top: calc(0.54 * var(--u)); margin-top: calc(29.5 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.ab-sec--area .ab-text { margin-top: calc(26.5 * var(--u)); }

/* 都道府県の見出し（● 県名 ───） */
.ab-pref { position: relative; padding-left: calc(17 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 400; line-height: calc(28 * var(--u)); letter-spacing: 0.1em; }
.ab-pref > span { position: relative; top: calc(0.54 * var(--u)); }
.ab-pref::before { content: "●"; position: absolute; left: 0; top: calc(0.6 * var(--u)); font-size: calc(9 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0; }
.ab-pref::after { content: ""; position: absolute; left: calc(83.93 * var(--u)); right: 0; top: calc(15 * var(--u)); border-top: calc(0.5 * var(--u)) solid currentColor; }
/* 「愛知県・岐阜県」（2026-10-30 先方・U63）：線は文字の後ろから（3文字の県名と同じ間隔 calc(17.43 * var(--u))） */
.ab-pref--wide::after { left: calc(149.93 * var(--u)); }
/* 「福井県・愛知県・岐阜県」（2026-11-01 先方「愛知・岐阜もノークホームズ」・PROD-20261101-alvia-5）：11文字。1文字 calc(16.5 * var(--u))（calc(15 * var(--u))＋字間 0.1em）×8 を足す */
.ab-pref--wide11::after { left: calc(215.93 * var(--u)); }

.ab-builders { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(20 * var(--u)); margin-top: calc(38.5 * var(--u)); }
/* PC（1024〜）：2社は左に寄せる（3列の左2列）。2026-10-31 RYO「2社を中央に寄せる」→ 同日「やっぱ左に寄せようか」で中央寄せを外した */
.ab-logo { display: flex; align-items: center; height: calc(44 * var(--u)); margin-top: calc(26.5 * var(--u)); } /* PC/TB：横並びで社名の高さを揃える（SP は XD どおり） */
.ab-logo img { display: block; height: auto; }
.ab-logo--norq img { width: calc(195.7 * var(--u)); }
.ab-logo--fujita img { width: calc(160.4 * var(--u)); }
.ab-logo--none { height: calc(44 * var(--u)); } /* ロゴが無い工務店用（今は使っていない） */
.ab-logo--ash img { width: calc(122.2 * var(--u)); } /* アッシュホーム（U63・先方支給 250×90）：高さをフジタと同じ 44 に */
.ab-builder__name { position: relative; top: calc(0.54 * var(--u)); margin-top: calc(26.4 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; line-height: calc(28 * var(--u)); letter-spacing: 0.05em; }
.ab-logo--fujita + .ab-builder__name { margin-top: calc(26.5 * var(--u)); }
.ab-logo--norq + .ab-builder__name { margin-top: calc(17.5 * var(--u)); }
/* 2026-11-01 RYO「パソコンの幅で2社の余白を同じ値に」：PC（1024〜）はロゴ枠が両社 44 なので、ノークもフジタと同じ 26.5 に（TB・SP は変えていない） */
/* 2026-11-01 RYO「タブレット幅でも揃えて」：TB（768〜1023）もロゴ枠が両社 44 なので、768〜 に広げた（SP は変えていない） */
@media (min-width: 768px) { .ab-logo--norq + .ab-builder__name { margin-top: calc(26.5 * var(--u)); } }
.ab-builder__info { position: relative; top: calc(0.54 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.ab-builder__info a { color: var(--c-accent); word-break: break-all; }
.ab-builder__info a:hover, .ab-map a:hover { text-decoration: underline; }
.ab-map { margin-top: calc(5 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.ab-map a { position: relative; top: calc(0.54 * var(--u)); display: inline-block; padding-left: calc(18 * var(--u)); color: var(--c-accent); }
.ab-map img { position: absolute; left: 0; top: calc(4.96 * var(--u)); width: calc(11.506 * var(--u)); height: auto; }

.ab-table { margin-top: calc(23 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.ab-row { position: relative; top: calc(0.54 * var(--u)); display: flex; }
.ab-row + .ab-row { margin-top: calc(10 * var(--u)); }
.ab-row--addr { margin-top: calc(5 * var(--u)) !important; } /* XD：設立〜所在地だけ 5 */
.ab-row dt { flex: 0 0 calc(92 * var(--u)); }
.ab-row dd { margin: 0; }

/* モデルハウス（XD：背景 #4b4442 に白 60%） */
.ab-models {
  padding: calc(50 * var(--u)) 0 calc(67 * var(--u));
  background: linear-gradient(rgba(255, 255, 255, .601163), rgba(255, 255, 255, .601163)), #4b4442;
}
.ab-models__group { margin-top: calc(56.5 * var(--u)); }
.ab-models__group:first-of-type { margin-top: calc(29.5 * var(--u)); }
.ab-models__list { display: grid; grid-template-columns: repeat(2, calc(390 * var(--u))); column-gap: calc(20 * var(--u)); row-gap: calc(30.5 * var(--u)); } /* 2026-10-30 投稿が3件以上で2段になったとき：段の間を SP のモデルハウス同士の間隔（59.2）とほぼ同じに */
.ab-model { margin-top: calc(28.7 * var(--u)); }
/* 2026-10-30 RYO「ここ画像も入れよカスタム投稿の」：モデルハウスのアイキャッチ。XD に欄が無いため、大きさは TOP・一覧のカード（PC 250・SP 300）と同じ、画像→名前の間も同じ 20.5 */
.ab-model__img { margin-bottom: calc(20.5 * var(--u)); }
.ab-model__img img { display: block; width: calc(250 * var(--u)); height: auto; aspect-ratio: 1; object-fit: cover; }
.ab-model__name { position: relative; top: calc(-0.5 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 400; line-height: calc(28 * var(--u)); }
.ab-model__addr { position: relative; top: calc(0.54 * var(--u)); margin-top: calc(16.3 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.ab-model .ab-map { margin-top: 0; }
.ab-model__info { position: relative; top: calc(0.54 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); white-space: nowrap; }
.ab-model__btn { margin-top: calc(26.5 * var(--u)); }
.ab-model__btn .c-linebtn { --lb-x: calc(27 * var(--u)); }

/* ---------- TB ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .pg-about .c-label { margin-left: 32px; }
  .ab-h1 { margin-left: 64px; }
  .ab-sec, .ab-models__group { width: auto; margin-left: 64px; margin-right: 32px; }
  .ab-models > .ab-tag { margin-left: 64px; }
  .ab-builders { grid-template-columns: repeat(2, 1fr); row-gap: 59px; }
  .ab-models__list { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

/* ---------- SP（XD どおり） ---------- */
@media (max-width: 767px) {
  .ab-dark { padding-bottom: calc(70.5 * var(--u)); }
  .ab-h1 { margin: calc(60 * var(--u)) 0 0 calc(20 * var(--u)); }
  .ab-h1 :is(img, .c-chars) { width: calc(229.8 * var(--u)); }
  .ab-sec, .ab-models__group { width: auto; margin-left: calc(20 * var(--u)); margin-right: calc(20 * var(--u)); }
  .ab-models > .ab-tag { margin-left: calc(20 * var(--u)); }
  .ab-text { white-space: nowrap; }
  .ab-sec--area .ab-text { white-space: normal; } /* 2026-11-02 施工エリア2行目は SP 幅に収まらないため自然改行（PROD-20261102-alvia-1） */
  .ab-builders { display: block; }
  .ab-logo { display: block; height: auto; }
  .ab-logo--none { height: calc(44 * var(--u)); }
  .ab-logo--norq + .ab-builder__name { margin-top: calc(26.4 * var(--u)); }
  .ab-builder + .ab-builder { margin-top: calc(59 * var(--u)); }
  .ab-models__list { display: block; }
  .ab-model + .ab-model { margin-top: calc(59.2 * var(--u)); }
  .ab-model__btn .c-linebtn { margin-left: calc(65 * var(--u)); }
  .ab-model__img img { width: calc(300 * var(--u)); }
}
@media (max-resolution: 1.99dppx) {
  .ab-pref::after { border-top-width: 1px; opacity: .5; }
}
/* 高精細画面：0.5px の線（Chromium は 1px 未満の線・高さを1pxに丸めるため、1px の線を縦に半分へ縮める） */
@media (min-resolution: 2dppx) {
  .ab-pref::after { border-top: 0; height: 1px; background: currentColor; transform: scaleY(.5); transform-origin: 0 0; }
}