/* ==========================================================================
   トヨタホーム 全国一斉オーナー宅見学会 LP
   calc(n * var(--k)) の n はデザイン上の px。
   SP: 375px デザイン基準で 100vw に比例 / PC: 1300px 以上で等倍、未満は比例縮小
   ========================================================================== */

:root {
  --k: calc(100vw / 375);
  --m: calc(100vw / 375);               /* MV 用（SP は --k と同じ） */
  --c-ink: #000;  /* K100。デザインの書き出しは純黒（#231815 は CMYK 換算値で焦げ茶に見える） */
  --c-orange: #f39939;
  --c-orange-pale: #f8c899;
  --c-band: #f6f5f5;
  --c-num: #cfcccb;
  --c-brown: #40220f;
  --c-soon: #e6e6e6;
  /* 入稿 v10（2026-10-20）: 和文 Zen Kaku Gothic New Medium / 英数 Oswald Regular（「point 01」は字形から Light）。タイトルロゴは SVG */
  --f-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-en: "Oswald", sans-serif;
  /* 字詰め: .ai の設定は「プロポーショナルメトリクス」だが、図形化版の文字幅は palt の無い版（Google Fonts 版と同じ）の幅と一致する
     。よって字間はデザインの値をそのまま使う */
}
@media (min-width: 768px) {
  :root {
    --k: min(1px, calc(100vw / 1300));
    --m: calc(100vw / 1920);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: #fff;
  color: var(--c-ink);
  font-family: var(--f-jp);
  font-weight: 500;
  line-height: 1.6;
  font-feature-settings: "palt" 1;
}
/* 文字の濃さ: デザイン（Illustrator 表示）に合わせる。
   Mac のブラウザは -webkit-font-smoothing: antialiased で約 1 割細くなるため指定しない（既定の描画で Illustrator とほぼ同じ濃さ）。
   iOS Safari は描画が細く、デザインより 1〜2 割薄く見えるため、文字と同色のごく細い縁取りで補う（iOS のみ） */
@supports (-webkit-touch-callout: none) {
  body * { -webkit-text-stroke: 0.012em currentColor; }
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }

.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-pc { display: none; }
@media (min-width: 768px) {
  .u-pc { display: revert; }
  br.u-pc { display: inline; }
  .u-sp { display: none; }
}

/* ==========================================================================
   MV
   ========================================================================== */
.mv { position: relative; z-index: 3; }
.mv__img img { width: 100%; }
.mv__logo { position: absolute; left: calc(15 * var(--m)); top: calc(15 * var(--m)); width: calc(124 * var(--m)); z-index: 1; }
.mv__logo img { width: 100%; }
.mv__copy { position: absolute; right: calc(23.7 * var(--m)); top: calc(159 * var(--m)); }
.mv__strips { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: calc(5.6 * var(--m)); }
.mv__strip {
  writing-mode: vertical-rl;
  background: var(--c-orange);
  color: #fff;
  font-size: calc(13.73 * var(--m));
  letter-spacing: 0.26em;
  line-height: 1;
  white-space: nowrap;
  width: calc(22.2 * var(--m));
  padding: calc(7.2 * var(--m)) 0 0;
  display: flex; align-items: center;
}
.mv__strip .u-sp { display: inline; }
.mv__strip.u-pc { display: none; }
.mv__punct { letter-spacing: -0.24em; }  /* デザインは帯の中の「、」「。」を半角で組んでいる（字間 0.26em − 0.5em） */
/* 帯の長さはデザインで帯ごとに決めてある（文字数からは決まらない）。SP は 3 本、PC は 4 本 */
.mv__strip--1 { height: calc(193.3 * var(--m)); }
.mv__strip--3 { height: calc(156.1 * var(--m)); }
.mv__strip--4 { height: calc(123.3 * var(--m)); }  /* .mv__strip の display: flex が .u-pc を上書きしないように（SP は帯 3 本） */
@media (min-width: 768px) {
  .mv__logo { left: calc(60 * var(--m)); top: calc(52 * var(--m)); width: calc(400 * var(--m)); }
  .mv__copy { right: calc(288 * var(--m)); top: calc(696 * var(--m)); }
  .mv__strips { gap: calc(17.9 * var(--m)); }
  .mv__strip { font-size: calc(43.9 * var(--m)); width: calc(71 * var(--m)); padding: calc(23 * var(--m)) 0 0; }
  .mv__strip--1 { height: calc(365.9 * var(--m)); }
  .mv__strip--2 { height: calc(296 * var(--m)); }
  .mv__strip--3 { height: calc(501.6 * var(--m)); }
  .mv__strip--4 { height: calc(396.6 * var(--m)); }
  .mv__strip .u-sp { display: none; }
  .mv__strip.u-pc { display: flex; }
}

/* ==========================================================================
   イントロ（タイトル・期間）
   ========================================================================== */
.intro { position: relative; z-index: 1; text-align: center; padding: calc(1 * var(--k)) 0 calc(54 * var(--k)); }
.intro__inner { position: relative; z-index: 1; }
.intro__title { width: calc(326 * var(--k)); margin: 0 auto; }
.intro__title img { width: 100%; }

.intro__deco { position: absolute; z-index: 0; pointer-events: none; }
.intro__deco--l, .intro__deco--r { display: none; }
.intro__deco--l-sp { left: 0; top: calc(143.5 * var(--k)); width: calc(113.5 * var(--k)); }
.intro__deco--r-sp { right: 0; top: calc(142.8 * var(--k)); width: calc(103.2 * var(--k)); }

@media (min-width: 768px) {
  .intro { padding: calc(24 * var(--k)) 0 calc(161 * var(--k)); }
  .intro__title { width: calc(1094 * var(--k)); }
  .intro__deco--l-sp, .intro__deco--r-sp { display: none; }
  .intro__deco--l { display: block; left: calc(50% - calc(960 * var(--k))); top: calc(290.5 * var(--k)); width: calc(492 * var(--k)); }
  .intro__deco--r { display: block; left: calc(50% + calc(437 * var(--k))); top: calc(302 * var(--k)); width: calc(523 * var(--k)); }
}

/* ==========================================================================
   キャンペーン（上下共通）
   ========================================================================== */
.campaign { position: relative; z-index: 2; background: var(--c-band); text-align: center; }
.campaign__inner { position: relative; width: calc(327 * var(--k)); margin: 0 auto; padding: calc(28 * var(--k)) 0 calc(11 * var(--k)); }
.campaign__tree { position: absolute; z-index: 2; pointer-events: none; }
/* 木: 1=樹木4 / 2,3=樹木2 / 4=樹木6（HTML の並び順） */
.campaign__tree--1 { left: calc(243 * var(--k)); top: calc(-5 * var(--k)); width: calc(20 * var(--k)); }
.campaign__tree--2 { left: calc(89 * var(--k)); top: calc(-14 * var(--k)); width: calc(20 * var(--k)); }
.campaign__tree--3 { left: calc(218.5 * var(--k)); top: calc(-1 * var(--k)); width: calc(20 * var(--k)); }
.campaign__tree--4 { left: calc(67 * var(--k)); top: calc(-11 * var(--k)); width: calc(25 * var(--k)); }

.campaign__flag {
  position: absolute; left: 50%; top: calc(-10 * var(--k)); transform: translateX(-50%);
  width: calc(149 * var(--k)); height: calc(23 * var(--k)); display: flex; align-items: center; justify-content: center;
  background: var(--c-ink); color: var(--c-orange);
  font-size: calc(11 * var(--k)); letter-spacing: 0.1em; line-height: 1;
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}
.campaign__lead { font-size: calc(11.5 * var(--k)); letter-spacing: -0.04em; line-height: 1.2; font-weight: 500; white-space: nowrap; }
.campaign__gift { display: flex; align-items: baseline; justify-content: center; margin-top: calc(1 * var(--k)); padding-left: calc(5.5 * var(--k)); line-height: 1; white-space: nowrap; }
.campaign__gift-name { font-size: calc(13.75 * var(--k)); letter-spacing: 0; }
.campaign__gift-kana { letter-spacing: 0; }
.campaign__gift-amount { font-family: var(--f-en); font-weight: 400; color: var(--c-orange); font-size: calc(34 * var(--k)); line-height: calc(35.5 * var(--k)); letter-spacing: calc(1 * var(--k)); margin: 0 calc(3.2 * var(--k)) 0 calc(3.5 * var(--k)); }  /* Illustrator 描画と字高・字幅・太さ（インク 97%）・字送りを照合して決定 */
/* SP デザインは「3,000」以外の文字が 3,000 の下端より約 5pt 上に乗る（基準線揃えのままだと 1.5pt 低い） */
.campaign__gift-name, .campaign__gift-unit, .campaign__gift-tail { position: relative; top: calc(-1.5 * var(--k)); }
.campaign__gift-unit { color: var(--c-orange); font-size: calc(14.52 * var(--k)); }
.campaign__gift-tail { font-size: calc(14.52 * var(--k)); letter-spacing: -0.04em; }
.campaign__gift-bang { letter-spacing: -0.54em; }  /* デザインは「！」の字間 -540（PC -520）で細く詰めている */
.campaign__step { position: relative; left: calc(4 * var(--k)); margin-top: calc(5.5 * var(--k)); font-size: calc(10 * var(--k)); line-height: 1.3; }
.campaign__toggle { margin-top: calc(11 * var(--k)); }
.campaign__notes {
  margin-top: calc(20.1 * var(--k)); background: #fff; text-align: justify;
  padding: calc(15.89 * var(--k)) calc(14.43 * var(--k)) calc(16.56 * var(--k)) calc(15.03 * var(--k)); font-size: calc(9.5 * var(--k)); line-height: 1.368; letter-spacing: -0.04em;
}
.campaign__notes p { margin: 0; }
/* SP: 注記はデザインから書き出した画像（assets/img/notes-sp.svg。文字は図形化済み）。余白はデザインの白枠と文字の位置から */
.campaign__notes-img { display: block; width: calc(297.65 * var(--k)); height: auto; }
.campaign__notes-text { display: none; }  /* SP は画像の alt に全文 */
.campaign--bottom .campaign__inner { padding-top: calc(32 * var(--k)); padding-bottom: calc(27.8 * var(--k)); }  /* 注記の白枠の下〜関連コンテンツの上 27.5（デザイン） */
/* SP のデザインは下段だけ間隔が違う（見出し 4pt 下・3pt 左、STEP2・ボタンがさらに下、注記との間が狭い） */
.campaign--bottom .campaign__lead { position: relative; left: calc(-3 * var(--k)); }
.campaign--bottom .campaign__step { left: calc(-0.5 * var(--k)); margin-top: calc(11 * var(--k)); }
.campaign--bottom .campaign__toggle { margin-top: calc(15.5 * var(--k)); }
.campaign--bottom .campaign__notes { margin-top: calc(6.1 * var(--k)); }

@media (min-width: 768px) {
  .campaign__inner { width: calc(1200 * var(--k)); padding: calc(81 * var(--k)) 0 calc(52 * var(--k)); }
  .campaign__tree--1, .campaign__tree--2, .campaign__tree--3 { width: calc(57 * var(--k)); }
  .campaign__tree--4 { width: calc(71 * var(--k)); }
  .campaign--top .campaign__tree--1 { left: calc(-85 * var(--k)); top: calc(12 * var(--k)); }
  .campaign--top .campaign__tree--2 { left: calc(-147 * var(--k)); top: calc(25 * var(--k)); }
  .campaign--top .campaign__tree--3 { left: calc(1232 * var(--k)); top: calc(186 * var(--k)); }
  .campaign--top .campaign__tree--4 { left: calc(1158 * var(--k)); top: calc(245 * var(--k)); }
  .campaign--bottom .campaign__tree--1 { left: calc(41 * var(--k)); top: calc(31 * var(--k)); }
  .campaign--bottom .campaign__tree--2 { left: calc(-21 * var(--k)); top: calc(44 * var(--k)); }
  .campaign--bottom .campaign__tree--3 { left: calc(1271 * var(--k)); top: calc(88 * var(--k)); }
  .campaign--bottom .campaign__tree--4 { left: calc(1197 * var(--k)); top: calc(98 * var(--k)); }

  .campaign__box { display: grid; grid-template-columns: calc(201 * var(--k)) 1fr; column-gap: calc(23 * var(--k)); align-items: start; width: calc(1197 * var(--k)); margin: 0 auto; text-align: left; }
  .campaign__flag {
    position: static; transform: none; grid-row: 1 / span 2;
    width: calc(201 * var(--k)); height: calc(138 * var(--k)); padding-left: calc(4 * var(--k));  /* 文字はデザインどおり枠の中央より 2px 右 */
    font-size: calc(28.89 * var(--k)); line-height: 1.2; text-align: left;  /* デザインは 2 行を左揃え（かたまりは枠の中央） */
    clip-path: polygon(0 0, 100% 0, 87% 50%, 100% 100%, 0 100%);
  }
  .campaign__lead { position: relative; left: calc(5 * var(--k)); font-size: calc(32 * var(--k)); letter-spacing: 0; text-align: center; padding-top: calc(2 * var(--k)); }
  .campaign__gift { justify-content: flex-start; margin-top: calc(-5 * var(--k)); padding-left: 0; }
  .campaign__gift-name { font-size: calc(43.41 * var(--k)); letter-spacing: 0; }
  .campaign__gift-kana { letter-spacing: -0.1em; }
  /* デザインは 40.72pt × 250%（=101.8pt）。Illustrator 描画と字高・字幅・字送りを照合 */
  .campaign__gift-amount { position: relative; top: calc(5 * var(--k)); font-size: calc(101.8 * var(--k)); line-height: calc(104.6 * var(--k)); letter-spacing: 0.021em; margin: 0 calc(7 * var(--k)) 0 calc(12 * var(--k)); }
  .campaign__gift-name, .campaign__gift-unit, .campaign__gift-tail { top: 0; }
  .campaign__gift-unit, .campaign__gift-tail { font-size: calc(45.68 * var(--k)); }
  .campaign__gift-tail { letter-spacing: -0.02em; }
  .campaign__gift-bang { letter-spacing: -0.52em; margin-left: -0.13em; }
  .campaign__step { position: relative; left: calc(-6 * var(--k)); margin-top: calc(37 * var(--k)); font-size: calc(18.26 * var(--k)); letter-spacing: 0.079em; }
  .campaign__toggle { margin-top: calc(24 * var(--k)); }
  .campaign--bottom .campaign__inner { padding-top: calc(78.5 * var(--k)); padding-bottom: calc(61 * var(--k)); }
  .campaign--bottom .campaign__notes { margin-top: calc(11 * var(--k)); margin-bottom: 0; }
  .campaign--bottom .campaign__step { left: calc(-6 * var(--k)); margin-top: calc(46.5 * var(--k)); }  /* 上の SP 用 left を PC の値に戻す */
  .campaign--bottom .campaign__toggle { margin-top: calc(35 * var(--k)); }
  .campaign--bottom .campaign__lead { left: calc(-11 * var(--k)); }  /* デザインは下段だけ見出しが上段より 16px 左 */
  .campaign__notes-img { display: none; }
  .campaign__notes-text { display: block; }
  .campaign__notes { width: calc(1201 * var(--k)); margin: calc(14 * var(--k)) auto calc(12 * var(--k)); padding: calc(29 * var(--k)) calc(37 * var(--k)) calc(29 * var(--k)) calc(41 * var(--k)); font-size: calc(13 * var(--k)); line-height: 1.5; letter-spacing: -0.041em; }
}

/* 開閉ボタン（キャンペーン注記・物件一覧 共通） */
.toggle { display: inline-flex; align-items: center; gap: 0.6em; font-size: calc(12 * var(--k)); letter-spacing: 0.06em; line-height: 1.2; }
.toggle::before, .toggle::after {
  content: ""; width: 0.9em; height: 0.9em;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-0.25em) rotate(45deg) scaleX(1);
}
.toggle[aria-expanded="true"]::before, .toggle[aria-expanded="true"]::after { transform: translateY(0.2em) rotate(-135deg); }
.toggle::before, .toggle::after { transition: transform .4s cubic-bezier(.4, 0, .2, 1); }  /* 矢印の向きも開閉に合わせて回す */
@media (prefers-reduced-motion: reduce) { .toggle::before, .toggle::after { transition: none; } }
@media (min-width: 768px) {
  .toggle { font-size: calc(19.22 * var(--k)); gap: 0.55em; padding-left: calc(13 * var(--k)); }  /* デザインは矢印と文字のかたまりが中央より 6.5px 右 */
}

/* ==========================================================================
   3つのPOINT
   ========================================================================== */
.points { position: relative; text-align: center; padding: calc(69 * var(--k)) 0 calc(62.6 * var(--k)); }
.points__deco { position: absolute; pointer-events: none; }
.points__deco--bird { left: calc(48 * var(--k)); top: calc(20 * var(--k)); width: calc(32 * var(--k)); }
.points__deco--cloud { left: calc(282 * var(--k)); top: calc(22 * var(--k)); width: calc(66 * var(--k)); }
.points__deco--tree1 { display: none; }
.points__deco--tree2 { left: calc(20 * var(--k)); top: calc(58 * var(--k)); width: calc(34 * var(--k)); }
.points__deco--tree3 { left: calc(291 * var(--k)); top: calc(95 * var(--k)); width: calc(34 * var(--k)); }
/* 行送りはデザインどおり 53.21pt。Illustrator とブラウザで行内の文字の置き方が違うため、上余白は見本と重ねて実測で決定 */
.points__title { position: relative; font-size: calc(28.88 * var(--k)); letter-spacing: 0.12em; line-height: 1.843; font-weight: 500; padding-left: 0.12em; margin-top: calc(-23.5 * var(--k)); }
.points__num, .points__en { font-family: var(--f-en); font-weight: 400; line-height: 1; }  /* Oswald の高い字面で行が広がらないように */
.points__num { font-size: 1.7em; }
/* SP は 2 行。拡大した「3」で 2 行目の行送りが広がらないように（デザインの行送り 53.21pt のまま） */
@media (max-width: 767.98px) { .points__num, .points__en { line-height: 0; } }
.points__en { font-size: 1em; }
.points__lead { margin-top: calc(14.5 * var(--k)); font-size: calc(13.5 * var(--k)); letter-spacing: 0.02em; line-height: 1.852; }
.points__list { width: calc(324 * var(--k)); margin: calc(30 * var(--k)) auto 0; display: grid; row-gap: calc(38 * var(--k)); }

.point { position: relative; }
.point__no { display: flex; justify-content: center; align-items: center; gap: 0; height: calc(30 * var(--k)); line-height: 1; }
.point__no::before, .point__no::after { content: ""; width: calc(14 * var(--k)); height: calc(30 * var(--k)); background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--c-ink) calc(50% - 0.5px), var(--c-ink) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.point__no::before { margin-right: calc(10 * var(--k)); }
.point__no::after { transform: scaleX(-1); margin-left: calc(10 * var(--k)); }
.point__label { font-family: var(--f-en); font-weight: 400;  /* SP のデザインは Regular、PC は Light */ color: var(--c-orange); font-size: calc(19.14 * var(--k)); letter-spacing: 0.02em; margin-top: calc(4 * var(--k)); }
.point__num { font-family: var(--f-en); font-weight: 300; color: var(--c-num); font-size: calc(30.85 * var(--k)); margin-left: calc(3.25 * var(--k)); }
.point__title { margin-top: calc(12 * var(--k)); font-size: calc(18 * var(--k)); letter-spacing: 0.04em; line-height: 1.35; padding-bottom: calc(8 * var(--k)); border-bottom: 1px solid var(--c-ink); font-weight: 500; }
.point__img { position: absolute; right: calc(-17 * var(--k)); top: calc(67 * var(--k)); width: calc(76 * var(--k)); }
.point__text { margin-top: calc(18 * var(--k)); font-size: calc(14 * var(--k)); letter-spacing: 0.05em; line-height: 1.63; padding-right: calc(2 * var(--k)); }

@media (min-width: 768px) {
  .points { width: calc(1200 * var(--k)); margin: 0 auto; padding: calc(118 * var(--k)) 0 calc(143.5 * var(--k)); }
  .points__deco--bird { left: calc(130 * var(--k)); top: calc(79 * var(--k)); width: calc(54 * var(--k)); }
  .points__deco--cloud { left: calc(963 * var(--k)); top: calc(58 * var(--k)); width: calc(182 * var(--k)); }
  .points__deco--tree1 { display: block; left: calc(29 * var(--k)); top: calc(175 * var(--k)); width: calc(57 * var(--k)); }
  .points__deco--tree2 { left: calc(91 * var(--k)); top: calc(162 * var(--k)); width: calc(57 * var(--k)); }
  .points__deco--tree3 { left: calc(1057 * var(--k)); top: calc(162 * var(--k)); width: calc(71 * var(--k)); }
  .points__num { font-size: 1.6em; }
  .points__title { font-size: calc(66.37 * var(--k)); letter-spacing: 0.04em; line-height: 1.2; padding-left: 0.04em; margin-top: calc(-8 * var(--k)); }
  .points__lead { position: relative; left: calc(-14 * var(--k)); margin-top: calc(33 * var(--k));  /* デザインは中央より 14px 左 */ font-size: calc(25.2 * var(--k)); letter-spacing: 0.04em; line-height: 1.2; white-space: nowrap; }
  .points__list { width: calc(1194 * var(--k)); margin-top: calc(70 * var(--k)); grid-template-columns: repeat(3, calc(362 * var(--k))); column-gap: calc(54 * var(--k)); row-gap: 0; }
  /* デザインは斜線 2 本を幅 185 の組で固定し、「point」はその左端から一定の位置（番号の桁幅で斜線が動かない） */
  .point__no { position: relative; left: calc(-2.5 * var(--k)); width: calc(185 * var(--k)); margin: 0 auto; height: calc(49 * var(--k)); justify-content: flex-start; padding-left: calc(39 * var(--k)); }
  .point__no::before, .point__no::after { position: absolute; top: calc(5 * var(--k)); width: calc(22.6 * var(--k)); height: calc(49 * var(--k)); margin: 0; }
  .point__no::before { left: 0; }
  .point__no::after { right: 0; }
  .point__label { font-size: calc(31.9 * var(--k)); margin-top: calc(6 * var(--k)); font-weight: 300; }
  /* デザインの番号は字幅はそのままで字高が約 9 割（Web の Oswald より背が低い）。基準線を軸に縦だけ縮める */
  .point__num { font-size: calc(50 * var(--k)); margin-left: calc(6.5 * var(--k)); transform: translateY(calc(1 * var(--k))) scaleY(0.9); transform-origin: 50% calc(47.5 * var(--k)); }
  .point__title { margin-top: calc(20 * var(--k)); font-size: calc(30.26 * var(--k)); letter-spacing: 0.02em; white-space: nowrap; padding-bottom: calc(14 * var(--k)); }
  .point__img { position: static; width: calc(157 * var(--k)); height: calc(178 * var(--k)); object-fit: contain; margin: calc(10 * var(--k)) auto 0; }
  .point__img { position: relative; top: calc(12 * var(--k)); right: auto; }  /* デザインはイラストが 12 下（下の文章の位置は変えない） */
  .point:nth-child(1) .point__img { left: calc(-3 * var(--k)); }
  .point:nth-child(2) .point__img { left: calc(2 * var(--k)); }
  .point:nth-child(3) .point__img { left: calc(-9 * var(--k)); }
  .point__text { margin-top: calc(8.5 * var(--k)); font-size: calc(24 * var(--k)); letter-spacing: 0.02em; line-height: 1.585; padding-right: 0; white-space: nowrap; }  /* 改行はデザインどおり <br> で。3 つ目は列幅をわずかに超える（デザインも同じ） */
}

/* ==========================================================================
   見学できる住まい
   ========================================================================== */
.homes { text-align: center; padding-bottom: calc(40 * var(--k)); }
.homes__title {
  width: calc(249 * var(--k)); height: calc(40 * var(--k)); margin: 0 auto;
  background: url("../img/common/banner.svg?v=20261030") no-repeat center top / 100% auto;
  color: #fff; font-size: calc(20.53 * var(--k)); letter-spacing: 0.12em; line-height: 1; font-weight: 500;
}
.homes__title span { display: flex; align-items: center; justify-content: center; height: calc(33 * var(--k)); padding-left: 0.12em; }
.homes__lead { margin-top: calc(19 * var(--k)); font-size: calc(13.5 * var(--k)); line-height: 1.2; letter-spacing: 0; white-space: nowrap; }

.homes__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(9 * var(--k)) calc(7.6 * var(--k)); width: calc(327 * var(--k)); margin: calc(18 * var(--k)) auto 0; }
.homes__tab {
  width: calc(103 * var(--k)); height: calc(26 * var(--k)); border-radius: calc(13 * var(--k)); background: var(--c-orange); color: #fff;
  border: 1.5px solid var(--c-orange); font-size: calc(10.5 * var(--k)); line-height: 1; white-space: nowrap; letter-spacing: 0;
  transition: background-color .2s, color .2s;
}
.homes__tab-paren { margin-right: -0.6em; }  /* 「中部（愛知県）」の末尾の「）」の空きを詰めて中央揃え（build_html.py の tab_label） */
.homes__tab:nth-last-child(-n+2) { position: relative; left: calc(-6 * var(--k)); }  /* SP のデザインは最終行（中国・九州）が中央より 6pt 左 */
.homes__tab[aria-selected="true"] { background: #fff; color: var(--c-orange); }
@media (hover: hover) { .homes__tab:hover { background: #fff; color: var(--c-orange); } }

.homes__panel { width: calc(327 * var(--k)); margin: calc(24 * var(--k)) auto 0; }
.homes__list { position: relative; left: calc(1 * var(--k)); display: grid; grid-template-columns: repeat(2, calc(155.5 * var(--k))); column-gap: calc(16 * var(--k)); row-gap: calc(26 * var(--k)); text-align: center; }
.homes__panel.is-collapsed .homes__list > li:nth-child(n+7) { display: none; }
.homes__toggle, .homes__rule { margin-top: calc(29 * var(--k)); }
.homes__toggle { width: 100%; justify-content: center; border-top: 1px solid var(--c-ink); padding-top: calc(13 * var(--k)); }
.homes__rule { border-top: 1px solid var(--c-ink); }

.home-card { display: flex; flex-direction: column; text-align: center; }
.home-card__head { position: relative; display: flex; height: calc(24.5 * var(--k)); line-height: 1; }  /* SP の箱はデザインどおり 24.5pt 角 */
.home-card__head::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(1.3 * var(--k)); min-height: 1px; background: var(--c-ink); transform: translateY(-50%); z-index: 0; }
.home-card__no, .home-card__pref { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.home-card__no { width: calc(24.5 * var(--k)); background: var(--c-ink); color: var(--c-orange); font-family: var(--f-en); font-weight: 400; font-size: calc(15.92 * var(--k)); }  /* SP は Regular、PC は Light（デザインの字形から） */
.home-card__pref { min-width: calc(49.1 * var(--k)); padding: 0 calc(7.3 * var(--k)); background: var(--c-orange); color: #fff; font-size: calc(11.5 * var(--k)); }
.home-card__city { margin-top: calc(8.5 * var(--k)); text-align: left; font-size: calc(14 * var(--k)); line-height: 1.2; font-weight: 500; min-height: 1.2em; }
.home-card__photo { margin-top: calc(14 * var(--k)); aspect-ratio: 363 / 247; }
.home-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.home-card__photo--soon { display: flex; align-items: center; justify-content: center; background: var(--c-soon); color: var(--c-orange); font-family: var(--f-en); font-size: calc(15.92 * var(--k)); letter-spacing: 0; }
/* 物件データが無いカード: 番号帯の下からカード下端まで COMING SOON の枠で埋める（デザイン準拠） */
.home-card.is-empty .home-card__photo { flex: 1 0 auto; aspect-ratio: auto; background: #dcdddd; margin-top: calc(15.5 * var(--k)); min-height: calc(272 * var(--k)); }
.home-card__spec { margin-top: calc(8 * var(--k)); padding-bottom: calc(7 * var(--k)); border-bottom: 1px dotted var(--c-ink); font-size: calc(11.5 * var(--k)); letter-spacing: 0.06em; line-height: 1.681; }
.home-card.is-tight .home-card__catch { letter-spacing: 0.02em; }
/* SP はデザインの改行どおりに組む（デザインもカード幅をわずかに超える行がある） */
.home-card__spec, .home-card__catch { white-space: nowrap; display: flex; flex-direction: column; align-items: center; }
/* ↑ 改行はデザインどおり（<br>）。長い行はデザインでもカード幅をわずかに超えるため、折り返さず左右均等にはみ出させる（中の span 1 つを flex で中央に） */
.home-card__catch { margin-top: calc(9 * var(--k)); font-size: calc(11.5 * var(--k)); letter-spacing: 0.06em; line-height: 1.681; }
.home-card__btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  margin-top: auto; height: calc(25 * var(--k)); border-radius: calc(13 * var(--k)); background: var(--c-orange); color: #fff;
  font-size: calc(11.2 * var(--k)); letter-spacing: 0.1em; line-height: 1; transition: opacity .2s;
}
.home-card > .home-card__btn { margin-top: auto; }
.home-card__catch { margin-bottom: calc(11 * var(--k)); }
.home-card__btn::after { content: ""; position: absolute; right: calc(18 * var(--k)); top: 50%; width: calc(8.8 * var(--k)); height: calc(8.8 * var(--k)); border-top: 1px solid #fff; border-right: 1px solid #fff; transform: translateY(-50%) rotate(45deg); }
.home-card__btn::before { content: ""; position: absolute; right: calc(17.5 * var(--k)); top: 50%; width: calc(9 * var(--k)); height: 1px; background: #fff; }
.home-card__btn.is-disabled { background: var(--c-orange-pale); font-family: var(--f-en); font-size: calc(11.5 * var(--k)); letter-spacing: 0.2em; }
.home-card__btn.is-disabled::before, .home-card__btn.is-disabled::after { display: none; }
@media (hover: hover) { a.home-card__btn:hover { opacity: .75; } }

@media (min-width: 768px) {
  .homes { padding-bottom: calc(110.1 * var(--k)); }
  .homes__title { width: calc(508 * var(--k)); height: calc(82 * var(--k)); font-size: calc(41.9 * var(--k)); }
  .homes__title span { height: calc(67 * var(--k)); }
  .homes__lead { margin-top: calc(35 * var(--k)); font-size: calc(25.2 * var(--k)); letter-spacing: 0.02em; }
  .homes__tab:nth-last-child(-n+2) { left: 0; }
  .homes__tabs { position: relative; left: calc(-3 * var(--k)); width: calc(795 * var(--k)); gap: calc(11 * var(--k)) calc(13 * var(--k)); margin-top: calc(44 * var(--k)); }
  .homes__tab { width: calc(189 * var(--k)); height: calc(50 * var(--k)); border-radius: calc(25 * var(--k)); font-size: calc(18 * var(--k)); border-width: 2px; letter-spacing: 0; }
  .homes__panel { width: calc(1199 * var(--k)); margin-top: calc(57 * var(--k)); }
  .homes__list { left: 0; grid-template-columns: repeat(3, calc(363 * var(--k))); column-gap: calc(55 * var(--k)); row-gap: calc(66 * var(--k)); }
  .homes__toggle, .homes__rule { margin-top: calc(44 * var(--k)); }
  .homes__toggle { padding-top: calc(17.5 * var(--k)); }

  .home-card__head { height: calc(45 * var(--k)); }
  .home-card__head::after { height: calc(3 * var(--k)); }
  .home-card__no { width: calc(46 * var(--k)); font-size: calc(29.75 * var(--k)); font-weight: 300; }
  .home-card:nth-child(3n+2) { position: relative; left: calc(-6 * var(--k)); }  /* デザインの列位置は 360 / 772 / 1193（間隔が 49・58 と不揃い） */
  .home-card:nth-child(3n) { position: relative; left: calc(-4 * var(--k)); }
  .home-card__pref { min-width: calc(93 * var(--k)); padding: 0 calc(10 * var(--k)); font-size: calc(24 * var(--k)); }
  .home-card__city { margin-top: calc(18 * var(--k)); font-size: calc(27.37 * var(--k)); }
  .home-card__photo { margin-top: calc(27 * var(--k)); }
  .home-card__photo--soon { font-size: calc(35.2 * var(--k)); }
  .home-card.is-empty .home-card__photo { margin-top: calc(26 * var(--k)); min-height: calc(491 * var(--k)); }
  .home-card__spec { margin-top: calc(11 * var(--k)); padding-bottom: calc(6.6 * var(--k)); border-bottom: 0.5px dotted var(--c-ink); font-size: calc(19 * var(--k)); line-height: 1.587; }  /* デザインは 0.5pt の点線 */
  .home-card__catch { margin-top: calc(24.4 * var(--k)); margin-bottom: calc(21.7 * var(--k)); font-size: calc(19 * var(--k)); line-height: 1.587; }
  .home-card__spec, .home-card__catch { padding-left: calc(6 * var(--k)); }  /* デザインは文字がカード中央より 3px 右 */
  .home-card__btn { width: calc(253 * var(--k)); height: calc(41 * var(--k)); border-radius: calc(21 * var(--k)); margin-left: auto; margin-right: auto; font-size: calc(18.32 * var(--k)); }
  .home-card__btn::after { right: calc(32 * var(--k)); width: calc(11 * var(--k)); height: calc(11 * var(--k)); }
  .home-card__btn::before { right: calc(31 * var(--k)); width: calc(15 * var(--k)); }
  .home-card__btn.is-disabled { font-size: calc(21 * var(--k)); }
}

/* 第2弾: デザイン側の位置の不揃いを再現するカードだけの補正（値は build_html.py の CARD_ADJ。既定 0 で他のカードは変わらない） */
.home-card.has-adj .home-card__city { padding-top: calc(var(--sp-body, 0) * calc(1 * var(--k))); }
.home-card.has-adj .home-card__spec > span { margin-bottom: calc(var(--sp-rule, 0) * calc(1 * var(--k))); }
.home-card.has-adj .home-card__catch > span { margin-bottom: calc(var(--sp-btn, 0) * calc(1 * var(--k))); }
@media (min-width: 768px) {
  .home-card.has-adj .home-card__city { padding-top: calc(var(--pc-body, 0) * calc(1 * var(--k))); }
  .home-card.has-adj .home-card__spec > span { margin-bottom: calc(var(--pc-rule, 0) * calc(1 * var(--k))); }
  .home-card.has-adj .home-card__catch > span { margin-bottom: calc(var(--pc-btn, 0) * calc(1 * var(--k))); }
}

/* ==========================================================================
   関連コンテンツ
   ========================================================================== */
.related { text-align: center; padding: calc(27.5 * var(--k)) 0 0; }
.related__title { position: relative; left: calc(-3.5 * var(--k)); display: inline-flex; align-items: center; gap: calc(6.5 * var(--k)); font-size: calc(24.17 * var(--k)); letter-spacing: 0.02em; line-height: 1.2; font-weight: 500; }
.related__title::before, .related__title::after { content: ""; width: calc(9.5 * var(--k)); height: calc(1.76 * var(--k)); background: var(--c-orange); }
.related__title::after { margin-left: calc(-4 * var(--k)); }  /* 末尾の字間・字形の余白を打ち消して、左右の線との間隔をデザインに揃える */
.related__lead { padding-left: calc(6 * var(--k)); margin-top: calc(23 * var(--k)); font-size: calc(13 * var(--k)); line-height: 1.2; letter-spacing: 0; white-space: nowrap; }
.related__list { width: calc(327 * var(--k)); margin: calc(16.5 * var(--k)) auto 0; display: grid; row-gap: calc(18.5 * var(--k)); }
.related-card {
  position: relative; display: grid; grid-template-columns: calc(193 * var(--k)) 1fr; grid-template-rows: 1fr auto;
  height: calc(112.7 * var(--k)); border: 1px solid var(--c-ink);  /* デザインは 0.6pt。実機では細すぎるため 1px（指摘により） */ text-align: left; overflow: hidden;
}
.related-card picture { display: contents; }  /* SP はデザインのトリミングで切り出した画像（related-N-sp.jpg）に差し替え */
.related-card__img { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: 100%; object-fit: cover; }
.related-card__title { grid-column: 2; grid-row: 1; align-self: center; padding: calc(6 * var(--k)) 0 0 calc(21.7 * var(--k)); font-size: calc(14.99 * var(--k)); letter-spacing: 0.1em; line-height: 1.214; }
.related__list li:first-child .related-card__title { font-size: calc(12 * var(--k)); line-height: calc(18.2 * var(--k)); letter-spacing: -0.02em; }
.related__list li:nth-child(n+3) .related-card__title { align-self: start; margin-top: calc(17.1 * var(--k)); }  /* SP のデザインは 1 行の見出しも 2 行の見出しの 1 行目とほぼ同じ高さ（中央揃えではない） */
.related-card__title-sub { font-size: calc(14.99 * var(--k)); letter-spacing: 0.1em; }  /* デザインは 2 行目「工場見学会」だけ 15pt・字間 100 */
.related-card__more { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: calc(6 * var(--k)); padding: 0 0 calc(13 * var(--k)) calc(23.9 * var(--k)); font-size: calc(10 * var(--k)); letter-spacing: 0.22em; line-height: 1; }
.related-card__more-rest { letter-spacing: 0.1em; }  /* デザインは「詳細」が字間 220、「はこちら」が 100 */
.related-card__more::after { content: ""; flex: none; width: calc(21.2 * var(--k)); height: calc(21.2 * var(--k)); background: url("../img/common/icon_arrow_circle.svg?v=20261030") no-repeat center / contain; }
@media (hover: hover) { .related-card { transition: opacity .2s; } .related-card:hover { opacity: .75; } }
.related__comma { margin-right: -0.5em; }  /* SP のデザインは「、」を半角で組んでいる（PC は全角） */
.related__closing { padding-left: calc(8 * var(--k)); margin-top: calc(36 * var(--k)); padding-bottom: calc(30 * var(--k)); font-size: calc(18.25 * var(--k)); letter-spacing: 0.02em; line-height: 1.2; }

@media (min-width: 768px) {
  .related { padding-top: calc(69 * var(--k)); }
  .related__title { left: calc(-2 * var(--k)); font-size: calc(41.29 * var(--k)); gap: calc(12 * var(--k)); }
  .related__title::after { margin-left: calc(-5 * var(--k)); }
  .related__comma { margin-right: 0; }
  .related__title::before, .related__title::after { width: calc(16 * var(--k)); height: calc(3 * var(--k)); }
  .related__lead { padding-left: 0; margin-top: calc(16 * var(--k)); font-size: calc(25.2 * var(--k)); letter-spacing: 0.08em; }
  .related__list { width: calc(1199 * var(--k)); margin-top: calc(49 * var(--k)); grid-template-columns: repeat(4, calc(259 * var(--k))); column-gap: calc(54.3 * var(--k)); }
  .related-card { display: flex; flex-direction: column; height: calc(329 * var(--k)); border-width: 1px; text-align: center; }
  .related-card__title { order: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(115 * var(--k)); padding: calc(8.5 * var(--k)) 0 0; font-size: calc(25 * var(--k)); line-height: 1.295; }
  .related__list li:first-child .related-card__title { font-size: calc(25 * var(--k)); line-height: 1.295; letter-spacing: 0; }
  .related__list li:nth-child(n+3) .related-card__title { align-self: auto; margin-top: 0; }
  .related-card__title-sub { font-size: calc(25 * var(--k)); }
  .related-card__more { order: 2; justify-content: center; gap: calc(5 * var(--k)); padding: 0 0 0 calc(9 * var(--k)); height: calc(40 * var(--k)); font-size: calc(16 * var(--k)); }
  .related-card__more-rest { letter-spacing: 0.1em; }  /* デザインは「詳細」が字間 220、「はこちら」が 100 */
.related-card__more::after { width: calc(37 * var(--k)); height: calc(36 * var(--k)); }
  .related-card__img { order: 3; margin-top: auto; height: calc(174 * var(--k)); }
  .related__closing { padding-left: 0; margin-top: calc(48 * var(--k)); padding-bottom: calc(80 * var(--k)); font-size: calc(31.17 * var(--k)); letter-spacing: 0.12em; }
}

/* ==========================================================================
   フッター
   ========================================================================== */
.footer { background: var(--c-ink); color: #fff; padding: calc(17.2 * var(--k)) 0 calc(25.2 * var(--k)); }
.footer__nav { position: relative; left: calc(-6.5 * var(--k)); display: grid; grid-template-columns: calc(177 * var(--k)) auto; justify-content: center; font-size: calc(11.5 * var(--k)); line-height: 1.896; letter-spacing: -0.021em; }
.footer__nav li:nth-child(1) { grid-column: 1; grid-row: 1; }
.footer__nav li:nth-child(2) { grid-column: 1; grid-row: 2; }
.footer__nav li:nth-child(3) { grid-column: 2; grid-row: 1; }
.footer__nav li:nth-child(4) { grid-column: 2; grid-row: 2; }
.footer__copy { position: relative; left: calc(-1.5 * var(--k)); margin-top: calc(10 * var(--k)); text-align: center; font-size: calc(10 * var(--k)); line-height: 1.2; letter-spacing: -0.021em; }
.footer__copy small { font-size: inherit; }
@media (hover: hover) { .footer__nav a:hover { text-decoration: underline; } }

@media (min-width: 768px) {
  .footer { display: flex; justify-content: space-between; align-items: center; height: calc(73 * var(--k)); padding: 0 calc(50% - calc(599 * var(--k))) 0 calc(50% - calc(611 * var(--k))); }
  .footer__nav { left: 0; display: flex; gap: 0 1.5em; font-size: calc(14 * var(--k)); line-height: 1; }
  .footer__copy { left: 0; margin: 0; font-size: calc(14 * var(--k)); }
}

/* ---------- 高さ固定の枠の中の文字の縦中央補正 ----------
   Zen Kaku Gothic New は上下の基準値が非対称（hhea 1160 / -288）で、line-height:1 の枠では文字が下に寄る（PC で 1〜2px）。
   下に余白を足して中央へ戻す。量は Chromium で DPR 2/3・PC/SP を実測して決定 */
.home-card__btn, .homes__tab, .home-card__pref, .home-card__no, .homes__title span { padding-bottom: var(--vfix, 0.07em); }
.campaign__flag { padding-bottom: var(--vfix, 0.1em); }
/* SP は小さい文字で丸めの影響が大きいため個別に（県名は補正不要、物件番号の Oswald は逆に 1px 上に寄る） */
@media (max-width: 767.98px) {
  .home-card__pref { padding-bottom: 0; }
  .home-card__no { padding-bottom: 0; padding-top: 0.07em; }
  .campaign__flag { padding-bottom: 0; padding-top: 0.1em; }  /* SP のデザインは文字が帯の中央よりわずかに下 */
}
@media (min-width: 768px) { .home-card__pref { padding-bottom: var(--vfix, 0.1em); } }

/* ---------- スクロール表示（見出し・リード・カード等の要素単位でふわっと表示。対象は main.js の REVEAL） ----------
   先方の参考サイト（旭化成ヘーベルハウス yohaku haus）を基準に、指示で「もう少しふわっと」: 下から 50px・1.0 秒、
   止まり際を長く取る減速カーブ（easeOutQuart）で浮かび、透明度は少し遅れて追いつく。発火は画面下 20% の線 */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.1s cubic-bezier(.33, 1, .68, 1), transform 1s cubic-bezier(.25, 1, .5, 1);
  transition-delay: var(--reveal-delay, 0s);   /* 時間差を付ける場合（main.js の STAGGER） */
}
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }