/* generated from src/gallery.css by _design/tools/build_css.py — 編集は src/ 側で */
/* ==========================================================================
   デザイン・実例ギャラリー（XD：SP 390×7472 ／ PC はデザインなし：PC3ページの寸法ルールで制作）
   2026-11-08 先方 XD「ALVIAHOME_sp_390px_デザイン.xd」（SP 390×10107）に合わせた（PROD-20261108-alvia-1）：
     PLAN 名 E-01 等（大 Widescreen Light 55／一覧 Light 30）・縦の PLAN（大 15／一覧 8）・大きな紹介に本文（15/28）・
     プランの間隔 899.7→1086・一覧の行 383.97→344.68
   ========================================================================== */
/* ---------- PC（制作部が PC3ページのルールで構成：ラベル x200/y80・本文カラム 800） ---------- */
.pg-gallery { padding-bottom: calc(120 * var(--u)); }
.pg-gallery .c-label__box :is(img, .c-chars):last-child { width: calc(74.5 * var(--u)); }
.gl-label__ja { position: absolute; left: calc(51 * var(--u)); top: calc(114 * var(--u)); }
.pg-gallery .c-label .gl-label__ja img { display: block; width: calc(135.5 * var(--u)); height: auto; }
.gl-h1 { margin: calc(100 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); }
.gl-h1 :is(img, .c-chars) { width: calc(490 * var(--u)); height: auto; }
.gl-intro { position: relative; top: calc(0.54 * var(--u)); margin: calc(60 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }

/* 写真付きプラン（A〜C） */
.gl-main { width: calc(800 * var(--u)); margin: calc(100 * var(--u)) auto 0; }
.gl-plan {
  display: grid; grid-template-columns: calc(300 * var(--u)) calc(470 * var(--u)); column-gap: calc(30 * var(--u)); align-items: start;
  padding: calc(60 * var(--u)) 0 calc(100 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(44, 35, 33, .55);
}
.gl-plan__info { position: relative; height: calc(160 * var(--u)); }
.gl-plan__plan {
  position: absolute; left: calc(7 * var(--u)); top: calc(-20.05 * var(--u)); transform-origin: 0 calc(23.75 * var(--u)); transform: rotate(90deg);
  font-family: var(--f-en); font-size: calc(15 * var(--u)); line-height: calc(37 * var(--u)); white-space: nowrap;
}
.gl-plan__letter { position: absolute; left: calc(24 * var(--u)); top: calc(5.66 * var(--u)); font-family: var(--f-en); font-size: calc(55 * var(--u)); font-weight: 300; line-height: calc(37 * var(--u)); white-space: nowrap; }
.gl-plan__spec { position: absolute; left: calc(182 * var(--u)); top: 0; font-family: var(--f-en); font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); white-space: nowrap; }
.gl-plan__spec li { position: relative; }
/* ●：XD では欧文書体の小さい黒丸（直径6px）。和文フォントの●に置き換わると大きくなるため円で描く */
.gl-plan__spec li::before { content: ""; position: absolute; left: calc(-12.72 * var(--u)); top: calc(8.4 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: currentColor; }
.gl-plan__spec li + li::before { top: calc(7.4 * var(--u)); }
.gl-plan__price { position: absolute; left: calc(167.5 * var(--u)); top: calc(65.2 * var(--u)); white-space: nowrap; }
.gl-plan__price { display: flex; align-items: flex-start; }
.gl-plan__price .num { position: relative; font-family: var(--f-en); font-size: calc(40 * var(--u)); line-height: calc(20 * var(--u)); }
.gl-plan__price .yen { position: relative; margin-left: calc(4.59 * var(--u)); top: calc(2.3 * var(--u)); /* 数字の幅に追従（欧文フォントが代替になっても間隔が変わらない） */ font-size: calc(20 * var(--u)); line-height: calc(22 * var(--u)); }
.gl-plan__catch { position: absolute; left: 0; top: calc(124.4 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0.05em; white-space: nowrap; }
.gl-plan__body { font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.gl-plan__photos img { display: block; width: 100%; height: auto; }
.gl-plan__int { margin-top: calc(5 * var(--u)); }

/* PC（1024〜）：2026-10-30 先方「PC時の「ギャラリー」見え方を添付のように調整できますか？」（_client/20261030_修正.pdf・U67）
   添付：写真を大きく（ピンクの枠＝本文カラムの左から約280〜800・区切り線の下60〜下の線の20手前）／坪数・間取り・価格をキャッチの下へ（オレンジの枠）。
   写真 520 幅で外観＋内観の高さ約 870 ＝添付の枠の高さと一致。左の列は 250（キャッチ 18px×13字が入る幅） */
@media (min-width: 1024px) {
  .gl-plan { grid-template-columns: calc(250 * var(--u)) calc(520 * var(--u)); padding-bottom: calc(20 * var(--u)); } /* 添付の枠の下端＝下の線の約20手前（区切り線の間隔は変更前とほぼ同じ） */
  /* 2026-11-08：本文（ボディコピー）が入ったので、キャッチ → 本文 → 坪数 → 価格 の順に上から流す（間隔は変更前のキャッチ→坪数 33.6・坪数→価格 21.2 のまま） */
  .gl-plan__info { display: flex; flex-direction: column; align-items: flex-start; }
  .gl-plan__catch { order: 1; }
  .gl-plan__body { order: 2; }
  .gl-plan__spec { order: 3; position: relative; left: calc(12.72 * var(--u)); top: auto; margin-top: calc(33.6 * var(--u)); }
  .gl-plan__price { order: 4; position: relative; left: calc(-1.78 * var(--u)); top: auto; margin-top: calc(21.2 * var(--u)); } /* 坪数との位置関係は変更前と同じ（●の左端から −1.78） */
}
/* PC・TB（768〜）：本文は左の列の幅で自動改行（XD の改行は SP 用）。キャッチの下に流す */
@media (min-width: 768px) {
  .gl-plan__info { height: auto; padding-top: calc(124.4 * var(--u)); }
  .gl-plan__catch { position: relative; top: 0; }
  .gl-plan__body { margin-top: calc(31.04 * var(--u)); line-break: strict; }
  .gl-br { display: none; }
}

/* 一覧（D〜S） */
.gl-list {
  display: grid; grid-template-columns: repeat(4, calc(185 * var(--u))); column-gap: calc(20 * var(--u));
  width: calc(800 * var(--u)); margin: 0 auto; padding-top: calc(92.1 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(44, 35, 33, .55);
}
.gl-card { position: relative; padding-bottom: calc(179.68 * var(--u)); }
.gl-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.gl-card__plan {
  position: absolute; left: calc(5.7 * var(--u)); top: calc(100% - calc(174.58 * var(--u))); transform-origin: 0 calc(12.8 * var(--u)); transform: rotate(90deg);
  font-family: var(--f-en); font-size: calc(8 * var(--u)); line-height: calc(20 * var(--u)); white-space: nowrap;
}
.gl-card__letter { position: absolute; left: calc(14.8 * var(--u)); top: calc(100% - calc(160.5 * var(--u))); font-family: var(--f-en); font-size: calc(30 * var(--u)); font-weight: 300; line-height: calc(20 * var(--u)); white-space: nowrap; }
.gl-card__spec { position: absolute; left: calc(12.5 * var(--u)); top: calc(100% - calc(126.81 * var(--u))); font-family: var(--f-en); font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); white-space: nowrap; }
.gl-card__spec li { position: relative; }
.gl-card__spec li::before { content: ""; position: absolute; left: calc(-11.2 * var(--u)); top: calc(6.47 * var(--u)); width: calc(4.65 * var(--u)); height: calc(4.65 * var(--u)); border-radius: 50%; background: currentColor; }
.gl-card__price { position: absolute; left: 0; top: calc(100% - calc(70.41 * var(--u))); white-space: nowrap; }
.gl-card__price { display: flex; align-items: flex-start; }
.gl-card__price .num { position: relative; font-family: var(--f-en); font-size: calc(34 * var(--u)); line-height: calc(17 * var(--u)); }
.gl-card__price .yen { position: relative; margin-left: calc(5.4 * var(--u)); top: calc(2.3 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(19 * var(--u)); }

/* ---------- TB（768〜1023） ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .pg-gallery .c-label { margin-left: 32px; }
  .gl-h1, .gl-intro { margin-left: 64px; margin-right: 32px; }
  .gl-main, .gl-list { width: auto; margin-left: 64px; margin-right: 32px; }
  .gl-plan { grid-template-columns: 300px 1fr; }
  .gl-list { grid-template-columns: repeat(4, 1fr); column-gap: 16px; }
}

/* ---------- SP（XD どおり） ---------- */
@media (max-width: 767px) {
  .pg-gallery { padding-bottom: calc(58.02 * var(--u)); }
  .gl-label__ja { top: calc(77 * var(--u)); }
  .gl-h1 { margin: calc(73 * var(--u)) 0 0 calc(20 * var(--u)); }
  .gl-h1 :is(img, .c-chars) { width: calc(350 * var(--u)); }
  .gl-intro { margin: calc(41.7 * var(--u)) 0 0 calc(20 * var(--u)); }
  .gl-main { width: auto; margin: calc(65.3 * var(--u)) 0 0; }
  .gl-plan { display: block; position: relative; height: calc(1086 * var(--u)); padding: 0; margin: 0 calc(20 * var(--u)); }
  .gl-plan__info { position: static; height: auto; }
  /* SP：XD の座標（区切り線の下端＝0）。info の左端は画面 x=0 基準なので −20 */
  .gl-plan__plan { left: calc(7 * var(--u)); top: calc(20.95 * var(--u)); }
  .gl-plan__letter { top: calc(46.66 * var(--u)); }
  .gl-plan__spec { top: calc(41 * var(--u)); }
  .gl-plan__price { top: calc(106.2 * var(--u)); }
  .gl-plan__catch { top: calc(165.4 * var(--u)); }
  .gl-plan__body { position: absolute; left: 0; top: calc(224.62 * var(--u)); white-space: nowrap; }
  .gl-plan__photos { position: absolute; left: 0; top: calc(425.2 * var(--u)); width: calc(350 * var(--u)); }
  .gl-list { grid-template-columns: repeat(2, calc(165 * var(--u))); grid-auto-rows: calc(344.68 * var(--u)); width: auto; margin: 0 calc(20 * var(--u)); }
  /* XD：右の列だけ PLAN・記号が左に 3.7 寄っている（全15行同じ） */
  .gl-card:nth-child(even) .gl-card__plan { left: calc(2 * var(--u)); }
  .gl-card:nth-child(even) .gl-card__letter { left: calc(11.1 * var(--u)); }
}

/* XD：縦の「PLAN」には下線（1px）（2026-10-28 制作部が XD アプリ書き出しと照合して発見） */
.gl-plan__plan, .gl-card__plan { text-decoration: underline; }
.gl-plan__plan { text-decoration-thickness: 1px; text-underline-offset: 2px; } /* 線の太さ・位置は XD アプリ書き出しと画素で照合して決定 */
.gl-card__plan { text-decoration-thickness: 1px; text-underline-offset: 1px; }

/* 価格の注意書き（2026-11-11 先方 PDF「テキスト追加指示.pdf」の赤枠2か所・RYO「小さい文字で入れてください。」）：リード文の下／一覧の下。※の後ろで2行目を字下げ */
.gl-note { width: calc(800 * var(--u)); margin: calc(40 * var(--u)) auto 0; padding-left: 1em; text-indent: -1em; font-size: calc(11 * var(--u)); line-height: calc(20 * var(--u)); }
.gl-note + .gl-main { margin-top: calc(50 * var(--u)); }
.gl-list + .gl-note { margin-top: 0; }
@media (min-width: 768px) and (max-width: 1023px) {
  .gl-note { width: auto; margin-left: 64px; margin-right: 32px; }
  .gl-list + .gl-note { margin-top: 0; }
}
@media (max-width: 767px) {
  .gl-note { width: auto; margin: calc(24 * var(--u)) calc(20 * var(--u)) 0; font-size: calc(10 * var(--u)); line-height: calc(17 * var(--u)); }
  .gl-note + .gl-main { margin-top: calc(40 * var(--u)); }
  .gl-list + .gl-note { margin-top: 0; }
}