/* generated from src/performance.css by _design/tools/build_css.py — 編集は src/ 側で */
/* ==========================================================================
   性能（XD：SP 390×9094 ／ PC はデザインなし：PC3ページの寸法ルールで制作）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html:has(.pg-perf):not(.is-smooth) { scroll-behavior: smooth; } /* ScrollSmoother を使うとき（U53）は ScrollSmoother が動かす */
}
/* ---------- PC（制作部が PC3ページのルールで構成：ラベル x200/y80・見出し y196・本文カラム 800） ---------- */
.pg-perf .c-label__box :is(img, .c-chars):last-child { width: calc(40.3 * var(--u)); }
.pf-h1 { margin: calc(95 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); }
.pf-h1 :is(img, .c-chars) { width: calc(490 * var(--u)); height: auto; }
.pf-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)); }

.pf-tabs { display: flex; gap: calc(25 * var(--u)); width: calc(800 * var(--u)); margin: calc(50 * var(--u)) auto 0; }
.pf-tab {
  position: relative; display: block; width: calc(250 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(3 * var(--u));
  background: var(--c-accent); color: #fff; text-align: center;
  padding: calc(6 * var(--u)) 0 0 0.08em; font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(28 * var(--u)); letter-spacing: 0.08em;
  transition: opacity .3s;
}
.pf-tab:hover, .pf-tab:focus-visible { opacity: .75; }
.pf-tab::after {
  content: ""; position: absolute; left: calc(50% - calc(5.89 * var(--u))); top: calc(38 * var(--u)); width: calc(11.779 * var(--u)); height: calc(5.89 * var(--u));
  background: url(../svg/common/chevron-white.svg) no-repeat 0 0 / 100% 100%;
}
.pf-tab--2 { text-indent: calc(-5.72 * var(--u)); } /* XD：「高気密 」末尾スペース込みで中央揃え＝2.86px左に寄っている */
.pf-illust { width: calc(600 * var(--u)); margin: calc(40 * var(--u)) auto 0; }
.pf-illust img { width: 100%; height: auto; }

.pf-blue { margin-top: calc(40 * var(--u)); padding-bottom: calc(143.54 * var(--u)); background: #e5f6fa; overflow-x: clip; } /* SP：XDの最終行（「。」の送り幅）が7px右にはみ出すため、横スクロールを出さない */
.pf-sec--insulation { padding-top: calc(90 * var(--u)); }
.pf-sec--airtight { padding-top: calc(90 * var(--u)); }
.pf-sec--seismic { padding-top: calc(90 * var(--u)); }
.pf-head { position: relative; width: calc(350 * var(--u)); height: calc(228 * var(--u)); margin-left: calc(50% - calc(175 * var(--u))); }
.pf-head--note { height: calc(255.6 * var(--u)); }
.pf-head__v { position: absolute; left: calc(41.27 * var(--u)); top: calc(18 * var(--u)); scroll-margin-top: calc(200 * var(--u)); } /* XD：タブ→見出し位置 −200 へスクロール */
.pf-head__v img { width: auto; height: calc(135.629 * var(--u)); }
.pf-head__badge { position: absolute; left: calc(139 * var(--u)); top: 0; width: calc(197 * var(--u)); }
.pf-head__badge img { width: 100%; height: auto; }
.pf-head__note { position: absolute; left: calc(138 * var(--u)); top: calc(227.6 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(28 * var(--u)); white-space: nowrap; }

.pf-h3, .pf-text, .pf-note, .pf-sec .c-bullet, .pf-sec .c-icon, .pf-lead { margin-left: calc(50% - calc(400 * var(--u))); }
.pf-h3 { position: relative; top: calc(-0.5 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(30 * var(--u)); letter-spacing: 0.05em; }
.pf-h3--ins1 { margin-top: calc(60 * var(--u)); }
.pf-h3--air1, .pf-h3--sei1 { margin-top: calc(68.2 * var(--u)); }
.pf-h3--air2 { margin-top: calc(50 * var(--u)); }
.pf-h3--sei2 { margin-top: calc(80 * var(--u)); }
.pf-text { position: relative; top: calc(0.54 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.pf-text--ins1 { margin-top: calc(32.3 * var(--u)); }
.pf-text--air1, .pf-text--air2, .pf-text--sei1 { margin-top: calc(30.3 * var(--u)); }

.pf-box {
  position: relative; width: calc(800 * var(--u)); margin: 0 auto; border: calc(2 * var(--u)) solid var(--c-accent); border-radius: calc(5 * var(--u));
  color: var(--c-accent); font-weight: 500;
}
.pf-box--1 { height: calc(199 * var(--u)); margin-top: calc(45.5 * var(--u)); }
.pf-box--2 { height: calc(177 * var(--u)); margin-top: calc(37.5 * var(--u)); }
.pf-box--3 { height: calc(177 * var(--u)); margin-top: calc(37 * var(--u)); }
.pf-box__title { position: absolute; left: calc(66 * var(--u)); top: calc(13.7 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: 0.05em; white-space: nowrap; }
.pf-box__title img { position: absolute; left: calc(-44 * var(--u)); top: calc(2.5 * var(--u)); width: calc(30 * var(--u)); height: auto; }
.pf-box__list { position: absolute; left: calc(39 * var(--u)); top: calc(64.5 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); white-space: nowrap; }
.pf-box__list li { position: relative; top: calc(0.54 * var(--u)); }
.pf-box__list li::before { content: "●"; position: absolute; left: calc(-17 * var(--u)); top: 0; font-size: calc(9 * var(--u)); line-height: calc(28 * var(--u)); }
.pf-box--1 .pf-box__list li:nth-child(1)::before { top: calc(0.6 * var(--u)); }
.pf-box--1 .pf-box__list li:nth-child(2) { margin-top: calc(1.5 * var(--u)); line-height: calc(25 * var(--u)); }
.pf-box--1 .pf-box__list li:nth-child(2)::before { top: calc(-1.9 * var(--u)); }
.pf-box--1 .pf-box__list li:nth-child(3) { margin-top: calc(3.5 * var(--u)); }
.pf-box--1 .pf-box__list li:nth-child(3)::before { top: calc(-1.4 * var(--u)); }
.pf-box--2 .pf-box__list li:nth-child(1)::before { top: calc(0.6 * var(--u)); }
.pf-box--2 .pf-box__list li:nth-child(2)::before { top: calc(-0.4 * var(--u)); }
.pf-box--2 .pf-box__list li:nth-child(3)::before { top: calc(-1.4 * var(--u)); }
.pf-box__text { position: absolute; left: calc(18 * var(--u)); top: calc(65.04 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); white-space: nowrap; }

/* PC：ピラミッド図とエネルギー図を横並び（SPは縦積み） */
.pf-charts { display: flex; align-items: flex-start; justify-content: space-between; width: calc(800 * var(--u)); margin: calc(60 * var(--u)) auto 0; }
.pf-pyramid { position: relative; width: calc(420 * var(--u)); }
.pf-pyramid img { width: 100%; height: auto; }
.pf-pyramid__note { position: absolute; left: calc(25.2 * var(--u)); top: calc(437.52 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(28 * var(--u)); white-space: nowrap; }
.pf-energy { width: calc(340 * var(--u)); }
.pf-sec .pf-energy .c-bullet { margin-left: 0; }
.pf-energy__img { margin-top: calc(5.7 * var(--u)); }
.pf-energy__img img { width: 100%; height: auto; }

.pf-note { position: relative; top: calc(0.5 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(20 * var(--u)); color: #4b4442; }
.pf-note--ua { margin-top: calc(50 * var(--u)); }
.pf-note--gx { margin-top: calc(18 * var(--u)); }
.pf-note--c { margin-top: calc(36.3 * var(--u)); }

.pf-photo img { width: 100%; height: auto; aspect-ratio: 1400 / 526; object-fit: cover; }
.pf-photo--1, .pf-photo--2 { margin-top: calc(120 * var(--u)); }

.pf-airtest { width: calc(800 * var(--u)); margin: calc(50 * var(--u)) auto 0; }
.pf-airtest img { width: 100%; height: auto; }
.pf-grade { width: calc(585 * var(--u)); margin: calc(30 * var(--u)) auto 0; }
.pf-grade img { width: 100%; height: auto; }
.pf-sec .pf-bullet--compare { margin-top: calc(25.1 * var(--u)); }
.pf-compare { width: calc(800 * var(--u)); margin: calc(3.7 * var(--u)) auto 0; }
.pf-compare__scroll img { width: 100%; height: auto; max-width: none; }

.pf-points { display: flex; justify-content: space-between; width: calc(800 * var(--u)); margin: calc(55 * var(--u)) auto 0; }
.pf-point { position: relative; width: calc(380 * var(--u)); height: calc(419 * var(--u)); background: #fff; border-radius: calc(5 * var(--u)); color: var(--c-text); }
.pf-point__label { font-family: var(--f-en); font-weight: 300; line-height: calc(28 * var(--u)); white-space: nowrap; }
.pf-point__p { position: absolute; left: calc(149.7 * var(--u)); top: calc(-14.2 * var(--u)); font-size: calc(15 * var(--u)); }
.pf-point__n { position: absolute; left: calc(193.1 * var(--u)); top: calc(-13.5 * var(--u)); font-size: calc(30 * var(--u)); }
.pf-point__title {
  position: absolute; left: 0; top: calc(44.2 * var(--u)); width: 100%; text-align: center;
  font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(30 * var(--u)); letter-spacing: 0.05em; padding-left: 0.05em;
}
.pf-point__title::after { content: ""; position: absolute; left: calc(50% - calc(39.85 * var(--u))); top: calc(52.03 * var(--u)); width: calc(79.7 * var(--u)); height: calc(1 * var(--u)); background: var(--c-accent); }
.pf-point__sub { position: absolute; left: 0; top: calc(118.04 * var(--u)); width: 100%; text-align: center; font-size: calc(15 * var(--u)); font-weight: 500; line-height: calc(28 * var(--u)); color: var(--c-accent); }
.pf-point__num { position: absolute; left: 0; top: calc(133 * var(--u)); width: 100%; }
.pf-point__num .xd-block { margin: 0 auto; width: auto; height: calc(66 * var(--u)); }
.pf-point__text { position: absolute; left: calc(35 * var(--u)); top: calc(221.04 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); white-space: nowrap; }

.pf-sec .c-icon { margin-top: calc(70 * var(--u)); }
.pf-lead { top: calc(-0.5 * var(--u)); margin-top: calc(12.2 * var(--u)); letter-spacing: 0; white-space: nowrap; }

/* ---------- TB（768〜1023：PCの構成を幅に合わせて縦積み） ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .pg-perf .c-label { margin-left: 32px; }
  .pf-h1, .pf-intro, .pf-h3, .pf-text, .pf-note, .pf-sec .c-bullet, .pf-sec .c-icon, .pf-lead { margin-left: 64px; margin-right: 32px; }
  .pf-tabs { width: auto; margin-left: 64px; margin-right: 32px; gap: 16px; }
  .pf-tabs li { flex: 1; }
  .pf-tab { width: auto; }
  .pf-box, .pf-airtest, .pf-compare { width: auto; margin-left: 64px; margin-right: 32px; }
  .pf-charts { display: block; width: auto; margin-left: 64px; margin-right: 32px; }
  .pf-energy { margin-top: 40px; }
  /* 比較表は横スワイプにせず、幅に合わせて縮めて全部見せる（2026-10-28 U21 RYO決定 B） */
  .pf-compare__scroll img { width: 100%; max-width: 800px; margin: 0 auto; }
  .pf-points { display: block; width: auto; margin-left: 64px; margin-right: 32px; }
  .pf-point + .pf-point { margin-top: 46px; }
  .pf-point--2 { height: 395px; }
}

/* ---------- SP（XD どおり） ---------- */
@media (max-width: 767px) {
  .pf-h1 { margin: calc(60 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pf-h1 :is(img, .c-chars) { width: calc(350 * var(--u)); }
  .pf-intro { margin: calc(44.1 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pf-tabs { gap: calc(12.739 * var(--u)); width: auto; margin: calc(26.74 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pf-tab { width: calc(108.174 * var(--u)); height: calc(46.348 * var(--u)); padding-top: calc(3.96 * var(--u)); }
  .pf-tab::after { left: calc(48.11 * var(--u)); top: calc(34.41 * var(--u)); }
  .pf-illust { width: calc(390 * var(--u)); margin: calc(21.41 * var(--u)) 0 0; }
  .pf-blue { margin-top: calc(21 * var(--u)); padding-bottom: calc(93.8 * var(--u)); }
  .pf-sec--insulation { padding-top: calc(62 * var(--u)); }
  .pf-sec--airtight { padding-top: calc(45 * var(--u)); }
  .pf-sec--seismic { padding-top: calc(41 * var(--u)); }
  .pf-head { margin-left: calc(20 * var(--u)); }
  .pf-h3, .pf-text, .pf-note, .pf-sec .c-bullet, .pf-sec .c-icon, .pf-lead { margin-left: calc(20 * var(--u)); }
  .pf-h3--ins1 { margin-top: calc(40.6 * var(--u)); }
  .pf-h3--air2 { margin-top: calc(34.2 * var(--u)); }
  .pf-h3--sei2 { margin-top: calc(64.2 * var(--u)); }
  .pf-box { width: calc(350 * var(--u)); margin-left: calc(20 * var(--u)); }
  .pf-charts { display: block; width: auto; margin: calc(25 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pf-pyramid { width: calc(350 * var(--u)); }
  .pf-pyramid__note { left: calc(21 * var(--u)); top: calc(364.6 * var(--u)); }
  .pf-energy { width: auto; }
  .pf-sec .pf-energy .c-bullet { margin: calc(11.3 * var(--u)) 0 0; }
  .pf-energy__img { width: calc(300 * var(--u)); margin-left: calc(25 * var(--u)); }
  .pf-note--ua { margin-top: calc(24.8 * var(--u)); }
  .pf-photo img { aspect-ratio: 390 / 316; }
  .pf-photo--1, .pf-photo--2 { margin-top: calc(79.2 * var(--u)); }
  .pf-airtest { width: calc(350 * var(--u)); margin: calc(67 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pf-grade { width: calc(390 * var(--u)); margin: calc(8.5 * var(--u)) 0 0; }
  .pf-compare { width: auto; }
  .pf-compare__scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pf-compare__scroll::-webkit-scrollbar { display: none; }
  .pf-compare__scroll img { width: calc(826 * var(--u)); }
  .pf-points { display: block; width: calc(350 * var(--u)); margin: calc(41 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pf-point { width: calc(350 * var(--u)); }
  .pf-point--2 { height: calc(395 * var(--u)); margin-top: calc(46 * var(--u)); }
  .pf-point__p { left: calc(134.7 * var(--u)); }
  .pf-point__n { left: calc(178.1 * var(--u)); }
  .pf-point__text { left: calc(20 * var(--u)); }
  .pf-sec .c-icon { margin-top: calc(45 * var(--u)); }
}