/* generated from src/top.css by _design/tools/build_css.py — 編集は src/ 側で */
/* ==========================================================================
   TOP（XD：PC「TOP」1400×9349 ／ SP「TOP」390×7395）
   margin の数値は XD 上の要素間隔（上の要素の下端 → 次の要素の上端）
   ========================================================================== */

/* ---------- FV ---------- */
.t-fv { position: relative; overflow: hidden; }
/* PC・SP とも FV は画面の高さいっぱい。画像は真ん中を基準に覆うように表示し、はみ出した上下左右は切る
   （2026-10-28 U43 RYO「SPとPCのFVは画面高さいっぱいで表示したい／ある程度どのサイズでもFVだけ表示されるように」）。
   100svh：スマホでアドレスバーが出ている状態の画面の高さ（対応していないブラウザは 100vh） */
.t-fv__pc, .t-fv__sp { position: relative; height: 100vh; height: 100svh; }
.t-fv__frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1s linear;
}
.t-fv__frame.is-show { opacity: 1; }
/* 最後の黒→白だけはフェードせずに切り替える（2026-10-28 U43 RYO「最後の黒背景から白背景に変わるとこだけはスパッと切り替わる」） */
.t-fv__frame.is-cut { transition: none; }
/* JavaScript が無いとき・main.js が動かなかったときは、最後の1枚（白）を表示する（2026-10-29 U56：真っ白になっていた）。
   is-js は site-header.php 直後のインライン script、is-fv-run は main.js が付ける。
   main.js が動かなかったかは、ページの読み込みが終わった時点（load）で判断する（main.js は defer なので、届くのが遅くても load より前に動く）。
   以前は「3秒たったら白」にしていたため、回線が遅いと白が出てアニメーションが流れなかった（2026-10-29 U57） */
html:not(.is-js) .t-fv picture:last-child .t-fv__frame,
html.is-fv-fallback .t-fv:not(.is-fv-run) picture:last-child .t-fv__frame { opacity: 1; transition: none; }
/* PC の FV のグラデーション（1〜6枚目）は、ブラウザが画像を少し縮めるときに粒がならされるため、画素をそのまま使って縮める
   （2026-10-29 U46 RYO「グラデーションのザラザラした粒直してね」。実測：1280×800 で粒の強さ 支給の 70% → 下の指定で約95%）。
   文字のある黒・白（7・8枚目）は文字の形を優先して通常の縮め方のまま */
.t-fv__pc picture:nth-child(-n+6) .t-fv__frame { image-rendering: pixelated; }
/* 縦長のタブレット（768px 以上で縦向き）は SP の FV を使う（2026-10-28 U45 RYO「A」：PC の FV だと「完成住宅」が半分切れるため） */
@media (min-width: 768px) and (orientation: portrait) {
  .t-fv .t-fv__pc.pc { display: none !important; }
  .t-fv .t-fv__sp.sp { display: block !important; }
}

/* ---------- collage ---------- */
.t-collage__pc { position: relative; margin-top: calc(60 * var(--u)); height: calc(677.5 * var(--u)); }
.t-collage__pc img { position: absolute; height: auto; }
.t-collage__pc .c1 { left: 0; top: 0; width: calc(495.7 * var(--u)); }
.t-collage__pc .c2 { left: calc(784.1 * var(--u)); top: 0; width: calc(253.6 * var(--u)); }
.t-collage__pc .c3 { left: calc(1062.4 * var(--u)); top: calc(104.2 * var(--u)); width: calc(337.6 * var(--u)); }
.t-collage__pc .c4 { left: calc(421.5 * var(--u)); top: calc(182.9 * var(--u)); width: calc(769.6 * var(--u)); }
@media (min-width: 768px) {
  /* 1400 を基準に画面幅へ比例（XD 1400 で等倍） */
  .t-collage__pc { height: calc(100vw * 677.5 / 1400); }
  .t-collage__pc .c1 { width: calc(100vw * 495.7 / 1400); }
  .t-collage__pc .c2 { left: calc(100vw * 784.1 / 1400); width: calc(100vw * 253.6 / 1400); }
  .t-collage__pc .c3 { left: calc(100vw * 1062.4 / 1400); top: calc(100vw * 104.2 / 1400); width: calc(100vw * 337.6 / 1400); }
  .t-collage__pc .c4 { left: calc(100vw * 421.5 / 1400); top: calc(100vw * 182.9 / 1400); width: calc(100vw * 769.6 / 1400); }
}
@media (max-width: 767px) {
  .t-collage__sp { position: relative; margin-top: calc(36.7 * var(--u)); height: calc(552.9 * var(--u)); }
  .t-collage__sp img { position: absolute; height: auto; }
  .t-collage__sp .c1 { left: calc(243.5 * var(--u)); top: 0; width: calc(146.5 * var(--u)); }
  .t-collage__sp .c2 { left: 0; top: calc(15.3 * var(--u)); width: calc(243.5 * var(--u)); }
  .t-collage__sp .c3 { left: calc(195 * var(--u)); top: calc(189.3 * var(--u)); width: calc(195 * var(--u)); }
  .t-collage__sp .c4 { left: 0; top: calc(302.3 * var(--u)); width: calc(390 * var(--u)); }
}

/* コラージュの2枚（PC：家族・資料／SP：家族・資料）は、枠はそのまま中の写真だけスクロールに合わせて動く（2026-10-29 U52 RYO
   「一番大きい資料広げてる写真と／真ん中上の3人家族の写真だけ」「スクロールと共に／地味に写真だけついてくる(写真枠は変えない感じに)」）。
   枠＝切り抜き画像のアルファをマスクに使う（aa_par）。写真の位置は helpers.php の aa_par が style で渡す */
.t-collage .t-par {
  position: absolute; display: block; overflow: hidden; height: auto;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.t-collage .t-par .t-par__img { position: absolute; max-width: none; height: auto; will-change: transform; }

/* ---------- sections（PC） ---------- */
.t-sec { text-align: center; }
.t-sec__icon { width: calc(37 * var(--u)); height: calc(21 * var(--u)); margin: 0 0 0 calc(50% - calc(18 * var(--u))); }
.t-sec__title :is(img, .c-chars) { height: auto; margin: 0 auto; }
.t-sec__lead { position: relative; top: calc(0.5 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 500; line-height: calc(33 * var(--u)); letter-spacing: 0.05em; padding-left: 0.05em; }
.t-sec__text { position: relative; top: calc(0.54 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.t-sec__img img { margin: 0 auto; height: auto; }
.t-sec .c-more { position: relative; }
.t-sec--line::before { /* 区切り線 */
  content: ""; display: block; width: calc(370 * var(--u)); height: calc(1 * var(--u)); margin: 0 auto; background: var(--c-line);
}

.t-sec--concept .t-sec__icon { margin-top: calc(97.5 * var(--u)); }
.t-sec--concept .t-sec__title { margin-top: calc(30.2 * var(--u)); }
.t-sec--concept .t-sec__title :is(img, .c-chars) { width: calc(412.9 * var(--u)); }
.t-sec--concept .t-sec__lead { margin-top: calc(48.9 * var(--u)); }
.t-sec--concept .t-sec__text { margin-top: calc(25.6 * var(--u)); }
.t-sec--concept .t-sec__img { margin-top: calc(16.5 * var(--u)); }
.t-sec--concept .t-sec__img img { width: calc(590 * var(--u)); }
.t-sec--concept .c-more { margin-top: calc(-36 * var(--u)); }

.t-sec--voice { padding-top: calc(84.5 * var(--u)); }
.t-sec--voice .t-sec__icon { margin-top: calc(69.5 * var(--u)); }
.t-sec--voice .t-sec__title { margin-top: calc(30 * var(--u)); }
.t-sec--voice .t-sec__title :is(img, .c-chars) { width: calc(768.4 * var(--u)); }
.t-sec--voice .t-sec__lead { margin-top: calc(49 * var(--u)); line-height: calc(38 * var(--u)); left: calc(-6 * var(--u)); top: calc(-1 * var(--u)); } /* XD 上でこの見出しのみ中心 x=694 */
.t-sec--voice .t-sec__text { left: calc(-0.5 * var(--u)); }
.t-sec--voice .t-sec__text { margin-top: calc(23.1 * var(--u)); }
.t-sec--voice .t-sec__img { margin-top: calc(48.1 * var(--u)); }
.t-sec--voice .c-more { margin-top: calc(66 * var(--u)); }

.t-sec--letter { padding-top: calc(84.5 * var(--u)); }
.t-sec--letter .t-sec__icon { margin-top: calc(69.5 * var(--u)); }
.t-sec--letter .t-sec__title { margin-top: calc(30 * var(--u)); }
.t-sec--letter .t-sec__title :is(img, .c-chars) { width: calc(569.8 * var(--u)); }
.t-sec--letter .t-sec__lead { margin-top: calc(51.6 * var(--u)); }
.t-sec--letter .t-sec__img { margin-top: calc(50.6 * var(--u)); }
.t-sec--letter .c-more { margin-top: calc(66 * var(--u)); }

.t-sec__img--photo img { width: calc(800 * var(--u)); }

.t-sec--price { padding-top: calc(84.4 * var(--u)); }
.t-sec--price .t-sec__icon { margin-top: calc(69.5 * var(--u)); }
.t-sec--price .t-sec__title { margin-top: calc(38.6 * var(--u)); }
.t-sec--price .t-sec__title :is(img, .c-chars) { width: calc(735 * var(--u)); }
.t-sec--price .t-sec__lead { margin-top: calc(51.5 * var(--u)); }
.t-sec--price .t-sec__img { margin-top: calc(15.7 * var(--u)); }
.t-sec--price .t-sec__img img { width: calc(542 * var(--u)); }
.t-sec--price .c-more { margin-top: calc(-36 * var(--u)); }

.t-sec--performance { padding-top: calc(84.4 * var(--u)); }
.t-sec--performance .t-sec__icon { margin-top: calc(69.5 * var(--u)); }
.t-sec--performance .t-sec__title { margin-top: calc(38.5 * var(--u)); }
.t-sec--performance .t-sec__title :is(img, .c-chars) { width: calc(139.9 * var(--u)); }
.t-sec--performance .t-sec__lead { margin-top: calc(51.35 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(27 * var(--u)); }
.t-sec--performance .t-sec__img { margin-top: calc(43.45 * var(--u)); }
.t-sec--performance .t-sec__img img { width: calc(901 * var(--u)); margin: 0 0 0 calc(50% - calc(389 * var(--u))); }
.t-sec--performance .c-more { margin-top: calc(70 * var(--u)); }

.t-sec--design {
  margin-top: calc(85 * var(--u)); padding: calc(77 * var(--u)) 0 calc(80.9 * var(--u));
  background: var(--c-dark); color: #fff;
}
.t-sec--design .t-sec__title { margin-top: calc(38.6 * var(--u)); }
.t-sec--design .t-sec__title :is(img, .c-chars) { width: calc(271.3 * var(--u)); }
.t-sec--design .t-sec__lead { margin-top: calc(39.5 * var(--u)); letter-spacing: 0.03em; padding-left: 0.03em; }
/* 外観写真：横に流れ続ける帯（2026-10-30 RYO「ループで自動でスライドして／手品家の自動スライドみたいに」「動かして」U65）
   手品家の .marquee と同じ作り：同じ3枚×2セットを並べ、帯を -50% まで一定の速さで動かす。
   間隔は gap ではなく各写真の右余白にして、-50% がちょうど1セット分（3枚＋間隔3つ）になるようにしている。
   止まっているときの見た目は XD どおり（PC・TB は3枚が画面幅いっぱい・間 7、SP は 291 幅・間 4）。速さは約 40px/秒 */
.t-gallery { --gap: calc(7 * var(--u)); --dur: 35s; margin-top: calc(54.7 * var(--u)); overflow: hidden; container-type: inline-size; }
.t-gallery__track { display: flex; width: max-content; animation: t-gallery-flow var(--dur) linear infinite; will-change: transform; }
.t-gallery__track li { flex: 0 0 auto; width: calc((100cqw - 2 * var(--gap)) / 3); margin-right: var(--gap); }
@keyframes t-gallery-flow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* 動きを減らす設定の環境では流さない（手品家と同じ） */
@media (prefers-reduced-motion: reduce) {
  .t-gallery__track { animation: none; }
}
.t-gallery img { width: 100%; height: auto; aspect-ratio: 462 / 631; object-fit: cover; }
.t-sec--design .c-more { margin-top: calc(82.5 * var(--u)); }
@media (min-width: 1401px) {
  .t-gallery { --gap: calc(100vw * 7 / 1400); }
}

.t-sec--faq { padding: calc(94.7 * var(--u)) 0 calc(82.4 * var(--u)); }
.t-sec--faq .t-sec__title :is(img, .c-chars) { width: calc(264 * var(--u)); }
.t-sec--faq .t-sec__lead { margin-top: calc(39.6 * var(--u)); }
.t-sec--faq .c-more { margin-top: calc(54.7 * var(--u)); } /* XD は中心から +15.5px（U06）。2026-10-30 RYO「中央にそろえる」で中央に */

.t-sec--voice::before, .t-sec--letter::before, .t-sec--price::before, .t-sec--performance::before {
  content: ""; display: block; width: calc(370 * var(--u)); height: calc(1 * var(--u)); margin: 0 auto; background: var(--c-line);
}

/* ---------- TB（768〜1023）：中央カラムを画面内に収める ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .t-sec { padding-left: 32px; padding-right: 32px; }
  .t-sec__img img { max-width: 100%; }
  .t-sec__title :is(img, .c-chars) { max-width: 100%; }
  .t-sec--performance .t-sec__img img { width: min(901px, 100%); margin: 0 auto; }
  .t-sec--design { padding-left: 0; padding-right: 0; }
  .t-sec--design .t-sec__lead { padding-left: 32px; padding-right: 32px; }
  .t-gallery { --dur: 25s; } /* 1セットの幅が PC より短いので、速さが約 40px/秒になるように */
  .t-sec__lead br.tb { display: inline; }
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .t-sec { text-align: left; }
  .t-sec__icon { margin: 0 0 0 calc(20 * var(--u)); }
  .t-sec__title :is(img, .c-chars) { margin: 0 0 0 calc(20 * var(--u)); }
  .t-sec__lead { padding: 0 0 0 calc(20 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); top: 0; left: 0 !important; }
  .t-sec__text { padding: 0 0 0 calc(20 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); left: 0 !important; }
  .t-sec__img img { margin: 0; width: calc(390 * var(--u)) !important; }
  .t-sec__img--photo img { width: calc(370 * var(--u)) !important; margin-left: calc(10 * var(--u)); }
  .t-sec .c-more { left: 0 !important; }
  .t-sec--voice::before, .t-sec--letter::before, .t-sec--price::before, .t-sec--performance::before { width: calc(370 * var(--u)); margin: 0 0 0 calc(10 * var(--u)); }

  .t-sec--concept .t-sec__icon { margin-top: calc(35.4 * var(--u)); }
  .t-sec--concept .t-sec__title { margin-top: calc(12.5 * var(--u)); }
  .t-sec--concept .t-sec__title :is(img, .c-chars) { width: calc(291.8 * var(--u)); }
  .t-sec--concept .t-sec__lead { margin-top: calc(31.15 * var(--u)); }
  .t-sec--concept .t-sec__text { margin-top: calc(27.35 * var(--u)); }
  .t-sec--concept .t-sec__img { margin-top: calc(11.5 * var(--u)); }
  .t-sec--concept .c-more { margin-top: calc(-36 * var(--u)); }

  .t-sec--voice { padding-top: calc(79.5 * var(--u)); }
  .t-sec--voice .t-sec__icon { margin-top: calc(14.5 * var(--u)); }
  .t-sec--voice .t-sec__title { margin-top: calc(15 * var(--u)); }
  .t-sec--voice .t-sec__title :is(img, .c-chars) { width: calc(336.6 * var(--u)); }
  .t-sec--voice .t-sec__lead { margin-top: calc(31.15 * var(--u)); line-height: calc(26 * var(--u)); top: calc(-1 * var(--u)); }
  .t-sec--voice .t-sec__text { margin-top: calc(27.35 * var(--u)); }
  .t-sec--voice .t-sec__img { margin-top: calc(27.1 * var(--u)); }
  .t-sec--voice .c-more { margin-top: calc(38 * var(--u)); }

  .t-sec--letter { padding-top: calc(79.5 * var(--u)); }
  .t-sec--letter .t-sec__icon { margin-top: calc(14.5 * var(--u)); }
  .t-sec--letter .t-sec__title { margin-top: calc(15 * var(--u)); }
  .t-sec--letter .t-sec__title :is(img, .c-chars) { width: calc(294.6 * var(--u)); }
  .t-sec--letter .t-sec__lead { margin-top: calc(31.65 * var(--u)); top: calc(-1 * var(--u)); }
  .t-sec--letter .t-sec__img { margin-top: calc(37.45 * var(--u)); }
  .t-sec--letter .c-more { margin-top: calc(38 * var(--u)); }

  .t-sec--price { padding-top: calc(79.5 * var(--u)); }
  .t-sec--price .t-sec__icon { margin-top: calc(16.5 * var(--u)); }
  .t-sec--price .t-sec__title { margin-top: calc(14.9 * var(--u)); }
  .t-sec--price .t-sec__title :is(img, .c-chars) { width: calc(301.4 * var(--u)); }
  .t-sec--price .t-sec__lead { margin-top: calc(31.05 * var(--u)); }
  .t-sec--price .t-sec__img { margin-top: calc(-8.55 * var(--u)); }
  .t-sec--price .c-more { margin-top: calc(-18 * var(--u)); }

  .t-sec--performance { padding-top: calc(79.5 * var(--u)); }
  .t-sec--performance .t-sec__icon { margin-top: calc(16.5 * var(--u)); }
  .t-sec--performance .t-sec__title { margin-top: calc(14.9 * var(--u)); }
  .t-sec--performance .t-sec__title :is(img, .c-chars) { width: calc(97.4 * var(--u)); }
  .t-sec--performance .t-sec__lead { margin-top: calc(31.15 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); }
  .t-sec--performance .t-sec__img { margin-top: calc(18.35 * var(--u)); }
  .t-sec--performance .t-sec__img img { margin: 0; }
  .t-sec--performance .c-more { margin-top: calc(32.9 * var(--u)); }

  .t-sec--design { margin-top: calc(79.6 * var(--u)); padding: calc(17 * var(--u)) 0 calc(93.6 * var(--u)); }
  .t-sec--design .t-sec__title { margin-top: calc(15.3 * var(--u)); }
  .t-sec--design .t-sec__title :is(img, .c-chars) { width: calc(169.5 * var(--u)); margin-left: calc(25.5 * var(--u)); }
  .t-sec--design .t-sec__lead { margin-top: calc(26.75 * var(--u)); padding-left: calc(20 * var(--u)); }
  .t-gallery { --gap: calc(4 * var(--u)); --dur: 22s; margin-top: calc(30.45 * var(--u)); }
  .t-gallery__track li { width: calc(291 * var(--u)); }
  .t-gallery img { width: calc(291 * var(--u)); height: calc(397 * var(--u)); aspect-ratio: auto; }
  .t-sec--design .c-more { margin-top: calc(46.4 * var(--u)); }

  .t-sec--faq { padding: calc(70 * var(--u)) 0 calc(70.1 * var(--u)); }
  .t-sec--faq .t-sec__title :is(img, .c-chars) { width: calc(203.4 * var(--u)); margin-left: calc(25.5 * var(--u)); }
  .t-sec--faq .t-sec__lead { margin-top: calc(28.32 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
  .t-sec--faq .c-more { margin-top: calc(32.98 * var(--u)); }
}
/* SP：TOP 到達後はタップで暗⇔白（main.js が role=button を付ける） */

/* ---------- Model House（2026-10-30 先方 変更_1030.pdf p4「TOPページに追加」・SP の XD 20261030「TOP」）----------
   Design と同じ暗い背景が続く。SP：Design の「詳しく」の下端から 80 にアイコン。カードは common.css の .c-mh
   PC はデザインなし（RYO「1Aと同じ」）：Design と同じ組み方（中央揃え・見出しは SP の 1.6 倍＝Design と同じ比）で、カードは本文カラム 800 に3枚 */
.t-sec--modelhouse { padding: calc(19.1 * var(--u)) 0 calc(80.9 * var(--u)); background: var(--c-dark); color: #fff; } /* PC：Design の下の余白 80.9＋19.1＝「詳しく」から 100 */
/* 2026-10-30 RYO「TOPのモデルハウスとデザインの間に線が見える」：ScrollSmoother が中身を小数の位置へ動かしたとき、Design の下端と Model House の上端が
   同じ画素の行で半分ずつ塗られ、後ろの白が混ざって明るい線（実測 1〜2px・色 59〜76）になる。Model House の上に同じ色の影を 2px 重ねて、境目の行を必ず暗い色で埋める（大きさ・位置は変わらない） */
.t-sec--modelhouse { box-shadow: 0 -2px 0 var(--c-dark); }
.t-sec--modelhouse .t-sec__title { margin-top: calc(38.6 * var(--u)); }
.t-sec--modelhouse .t-sec__title :is(img, .c-chars) { width: calc(534.9 * var(--u)); }
.t-sec--modelhouse .t-sec__lead { margin-top: calc(39.5 * var(--u)); letter-spacing: 0.03em; padding-left: 0.03em; }
.t-sec--modelhouse .c-mh-list { justify-content: center; margin-top: calc(54.7 * var(--u)); }
.t-sec--modelhouse .c-more { margin-top: calc(82.5 * var(--u)); }
@media (min-width: 768px) and (max-width: 1023px) {
  .t-sec--modelhouse { padding-left: 32px; padding-right: 32px; } /* 他の欄と同じ左右 32 */
  .t-sec--modelhouse .c-mh-list { max-width: 800px; }
}
@media (max-width: 767px) {
  /* Design の下の余白 93.6 の中に重ねて、「詳しく」の下端から 80 にアイコン（XD 6048.4 → 6128.4） */
  .t-sec--modelhouse { margin-top: calc(-13.6 * var(--u)); padding: 0 0 calc(76.4 * var(--u)); }
  .t-sec--modelhouse .t-sec__icon { position: relative; }
  .t-sec--modelhouse .t-sec__title { margin-top: calc(15.3 * var(--u)); }
  .t-sec--modelhouse .t-sec__title :is(img, .c-chars) { width: calc(334.33 * var(--u)); }
  .t-sec--modelhouse .t-sec__lead { margin-top: calc(30.62 * var(--u)); padding-left: calc(20 * var(--u)); }
  .t-sec--modelhouse .c-mh-list { margin-top: calc(30.58 * var(--u)); }
  .t-sec--modelhouse .c-more { margin-top: calc(22 * var(--u)); }
  /* XD：暗い背景の下端 → よくあるご質問の見出し 59（Model House が無いときは今までどおり 70） */
  .t-sec--modelhouse + .t-sec--faq { padding-top: calc(59 * var(--u)); }
}