/* generated from src/concept.css by _design/tools/build_css.py — 編集は src/ 側で */
/* ==========================================================================
   完成住宅とは（XD：PC 1400×5782 ／ SP 390×5410）
   ========================================================================== */
.cp-h1 { margin: calc(95 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); }
.cp-h1 :is(img, .c-chars) { width: calc(464.3 * var(--u)); height: auto; }
.cp-intro { position: relative; top: calc(0.54 * var(--u)); margin: calc(59.1 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.cp-photo img { width: 100%; height: auto; aspect-ratio: 1400 / 522; object-fit: cover; }
.cp-photo--1 { margin-top: calc(73.5 * var(--u)); }
.cp-gray { background: var(--c-gray); padding-bottom: calc(198.1 * var(--u)); }

.cp-block--choose { padding-top: calc(72 * var(--u)); }
.cp-block--choose .c-vhead__title img { width: calc(168.8 * var(--u)); }
.cp-text { position: relative; top: calc(0.54 * var(--u)); margin-left: calc(50% - calc(400 * var(--u))); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.cp-block--choose .cp-text { margin-top: calc(84.1 * var(--u)); }
.cp-block .c-bullet { margin: calc(73.8 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); }
.cp-table { margin-top: calc(19.67 * var(--u)); }
.cp-table__scroll { width: calc(800 * var(--u)); margin: 0 auto; }
.cp-table .xd-block { width: calc(800 * var(--u)); height: auto; }
.cp-block .c-icon { margin: calc(40.13 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); }
.cp-block--choose .c-lead18 { margin: calc(8.2 * var(--u)) 0 0 calc(50% - calc(396 * var(--u))); }
.cp-qa {
  width: calc(796 * var(--u)); height: calc(169 * var(--u)); margin: calc(53.8 * var(--u)) 0 0 calc(50% - calc(396 * var(--u)));
  border: calc(2 * var(--u)) solid #4b4442; border-radius: calc(5 * var(--u));
  color: #4b4442; text-align: center;
}
.cp-qa__title {
  position: relative; display: inline-block; margin-top: calc(21.2 * var(--u)); padding-left: calc(44 * var(--u));
  font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(30 * var(--u)); letter-spacing: 0.05em;
}
.cp-qa__title img { position: absolute; left: 0; top: calc(3.9 * var(--u)); width: calc(30 * var(--u)); height: auto; }
.cp-qa__text { position: relative; left: calc(-2 * var(--u)); top: calc(0.5 * var(--u)); margin-top: calc(17.13 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(24 * var(--u)); }
.cp-photo--2 { margin-top: calc(127 * var(--u)); }

.cp-block--voice { padding-top: calc(72 * var(--u)); }
.cp-block--voice .c-vhead__title img { width: calc(168.8 * var(--u)); }
.cp-block--voice .cp-text { margin-top: calc(84 * var(--u)); }
.cp-story__title {
  position: relative; top: calc(0.6 * var(--u)); margin: calc(81.2 * var(--u)) 0 0 calc(50% - calc(115 * var(--u)));
  font-size: calc(19 * var(--u)); line-height: calc(28 * var(--u)); white-space: nowrap;
}
.cp-story__title .en { position: absolute; left: calc(169.1 * var(--u)); top: calc(1.28 * var(--u)); font-size: calc(20 * var(--u)); }
.cp-story {
  display: grid; grid-template-columns: calc(350 * var(--u)) calc(350 * var(--u)); column-gap: calc(40 * var(--u)); row-gap: calc(49 * var(--u));
  width: calc(740 * var(--u)); margin: calc(38.3 * var(--u)) auto 0;
  grid-template-areas: "s1 s4" "s2 s5" "s3 .";
}
.cp-story__item { position: relative; height: calc(172 * var(--u)); background: #fff; border-radius: calc(5 * var(--u)); color: #4b4442; text-align: center; }
.cp-story__item--1 { grid-area: s1; }
.cp-story__item--2 { grid-area: s2; }
.cp-story__item--3 { grid-area: s3; }
.cp-story__item--4 { grid-area: s4; }
.cp-story__item--5 { grid-area: s5; }
.cp-story__num {
  position: absolute; left: 0; top: calc(-13.5 * var(--u)); width: 100%;
  font-family: var(--f-en); font-size: calc(30 * var(--u)); font-weight: 300; line-height: calc(28 * var(--u)); color: var(--c-text);
}
.cp-story__item p { position: relative; top: calc(0.54 * var(--u)); padding-top: calc(30.5 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.cp-story__item--1::after, .cp-story__item--2::after, .cp-story__item--4::after {
  content: ""; position: absolute; left: calc(50% - calc(7.4 * var(--u))); top: calc(100% + calc(11.8 * var(--u)));
  width: calc(14.819 * var(--u)); height: calc(7.41 * var(--u)); background: url(../svg/common/chevron.svg) no-repeat 0 0 / 100% 100%;
}
.cp-block--voice .c-icon { margin-top: calc(74 * var(--u)); }
.cp-block--voice .c-lead18 { margin: calc(12.2 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); }

/* ---------- TB ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .c-label { margin-left: 32px; }
  .cp-h1, .cp-intro, .cp-text, .cp-block .c-bullet, .cp-block .c-icon, .cp-block .c-lead18 { margin-left: 64px; margin-right: 32px; }
  .cp-qa { width: auto; height: auto; margin-left: 64px; margin-right: 32px; padding-bottom: 24px; }
  /* 比較表は横スワイプにせず、幅に合わせて縮めて全部見せる（2026-10-28 U21 RYO決定 B） */
  .cp-table__scroll { width: auto; padding: 0 32px; }
  .cp-table .pc .xd-block { width: 100%; max-width: 800px; margin: 0 auto; }
  .c-vhead__side { left: auto; right: 32px; }
  .cp-story { width: auto; padding: 0 32px; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .cp-story__title { margin-left: 64px; }
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .cp-h1 { margin: calc(60 * var(--u)) 0 0 calc(20 * var(--u)); }
  .cp-h1 :is(img, .c-chars) { width: calc(316.9 * var(--u)); }
  .cp-intro { margin: calc(36.2 * var(--u)) 0 0 calc(20 * var(--u)); }
  .cp-photo img { aspect-ratio: 390 / 316; }
  .cp-photo--1 { margin-top: calc(49.5 * var(--u)); }
  .cp-gray { padding-bottom: calc(96.8 * var(--u)); }
  .cp-block--choose .c-vhead__title img { width: calc(128.5 * var(--u)); }
  .cp-text { margin-left: calc(20 * var(--u)); }
  .cp-block--choose .cp-text { margin-top: calc(69 * var(--u)); }
  .cp-block .c-bullet { margin: calc(51.8 * var(--u)) 0 0 calc(20 * var(--u)); }
  .cp-table { margin-top: calc(19.7 * var(--u)); }
  .cp-table__scroll {
    width: 100%; overflow-x: auto; padding: 0 0 0 calc(20 * var(--u));
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cp-table__scroll::-webkit-scrollbar { display: none; }
  .cp-table__scroll .sp { width: calc(582.56 * var(--u)); }
  .cp-table .xd-block { width: calc(582.56 * var(--u)); }
  .cp-block .c-icon { margin: calc(41.1 * var(--u)) 0 0 calc(20 * var(--u)); }
  .cp-block--choose .c-lead18 { margin: calc(12.2 * var(--u)) 0 0 calc(20 * var(--u)); }
  .cp-qa { width: calc(350 * var(--u)); height: calc(208 * var(--u)); margin: calc(43.8 * var(--u)) 0 0 calc(20 * var(--u)); text-align: left; }
  .cp-qa__title { display: block; margin: calc(14.2 * var(--u)) 0 0 calc(22 * var(--u)); padding-left: calc(44 * var(--u)); }
  .cp-qa__title img { top: calc(4 * var(--u)); }
  .cp-qa__text { left: 0; margin: calc(17.13 * var(--u)) 0 0 calc(22 * var(--u)); }
  .cp-photo--2 { margin-top: calc(78 * var(--u)); }
  .cp-block--voice .c-vhead__title img { width: calc(132.2 * var(--u)); }
  .cp-block--voice .cp-text { margin-top: calc(50.7 * var(--u)); }
  .cp-story__title { margin: calc(69.2 * var(--u)) 0 0 calc(80 * var(--u)); }
  .cp-story { display: block; width: calc(350 * var(--u)); margin: calc(38.3 * var(--u)) 0 0 calc(20 * var(--u)); }
  .cp-story__item { margin-top: calc(49 * var(--u)); }
  .cp-story__item:first-child { margin-top: 0; }
  .cp-story__item--4 { margin-top: calc(51 * var(--u)); }
  .cp-story__item--3::after {
    content: ""; position: absolute; left: calc(50% - calc(7.4 * var(--u))); top: calc(100% + calc(11.8 * var(--u)));
    width: calc(14.819 * var(--u)); height: calc(7.41 * var(--u)); background: url(../svg/common/chevron.svg) no-repeat 0 0 / 100% 100%;
  }
  .cp-block--voice .c-icon { margin-top: calc(52 * var(--u)); }
  .cp-block--voice .c-lead18 { margin: calc(12.2 * var(--u)) 0 0 calc(20 * var(--u)); }
}