/* generated from src/price.css by _design/tools/build_css.py — 編集は src/ 側で */
/* ==========================================================================
   価格とプロセス（XD：PC 1400×7954 ／ SP 390×7548）
   ========================================================================== */
.sp-ls { letter-spacing: 0; }
.pr-head { position: relative; height: calc(1077 * var(--u)); overflow-x: clip; } /* 1024〜1219px：右のイラストが画面外へ出る分を切る（横スクロール防止） */
.pg-price .c-label { width: calc(190 * var(--u)); }
.pg-price .c-label img { width: calc(190 * var(--u)); }
.pr-h1 { position: relative; z-index: 1; margin: calc(95 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); }
.pr-h1 :is(img, .c-chars) { width: calc(582.2 * var(--u)); height: auto; }
.pr-intro { position: relative; z-index: 1; top: calc(0.54 * var(--u)); margin: calc(61.56 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.pr-illust { position: absolute; left: calc(50% - calc(183 * var(--u))); top: calc(467 * var(--u)); width: calc(703 * var(--u)); }
.pr-illust img { width: 100%; height: auto; }

.pr-blue { background: #e5f6fa; padding-bottom: calc(143.54 * var(--u)); }
.pr-sec--process { padding-top: calc(75 * var(--u)); }
.pr-sec--process .c-vhead__title img { width: calc(168.8 * var(--u)); }
.pr-process { margin: calc(94.5 * var(--u)) 0 0 calc(50% - calc(222 * var(--u))); width: calc(445 * var(--u)); }
.pr-process img { width: 100%; height: auto; }
.pr-cards__title { position: relative; top: calc(0.6 * var(--u)); margin-top: calc(78.72 * var(--u)); text-align: center; font-size: calc(19 * var(--u)); line-height: calc(28 * var(--u)); }
.pr-cards { position: relative; width: calc(740 * var(--u)); height: calc(575 * var(--u)); margin: calc(32.28 * var(--u)) auto 0; }
.pr-card { position: absolute; width: calc(350 * var(--u)); height: calc(163 * var(--u)); background: #fff; border-radius: calc(5 * var(--u)); }
.pr-card--1 { left: 0; top: 0; } /* XD は 6 下（列2が 6px 上に見える・U06）。2026-10-30 RYO の指示で列2と揃え、カードの間を全部 43 に */
.pr-card--2 { left: 0; top: calc(206 * var(--u)); }
.pr-card--3 { left: 0; top: calc(412 * var(--u)); }
.pr-card--4 { left: calc(390 * var(--u)); top: 0; }
.pr-card--5 { left: calc(390 * var(--u)); top: calc(206 * var(--u)); }
.pr-card__num {
  position: absolute; left: 0; top: calc(-13.5 * var(--u)); width: 100%; text-align: center;
  font-family: var(--f-en); font-size: calc(30 * var(--u)); font-weight: 300; line-height: calc(28 * var(--u));
}
.pr-card__title {
  position: absolute; left: 0; top: calc(44.15 * 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; color: #4b4442;
}
.pr-card__text {
  position: absolute; left: calc(47 * var(--u)); top: calc(87 * var(--u));
  font-size: calc(15 * var(--u)); font-weight: 500; line-height: calc(28 * var(--u)); color: var(--c-accent); white-space: nowrap;
}
/* 矢印は本文の文字として置く（CSS の content の文字は Adobe Fonts のダイナミックサブセットに入らず Noto Sans JP になるため・2026-10-28 U41） */
.pr-card__arrow { position: absolute; left: calc(-23.5 * var(--u)); top: 0; font-weight: 400; }
.pr-count { width: calc(327 * var(--u)); margin: calc(75 * var(--u)) 0 0 calc(50% - calc(163 * var(--u))); }
.pr-count .xd-block { width: calc(327 * var(--u)); height: auto; }
.pr-photo img { width: 100%; height: auto; aspect-ratio: 1400 / 526; object-fit: cover; }
.pr-photo--1 { margin-top: calc(147 * var(--u)); }

.pr-sec--total { padding-top: calc(90 * var(--u)); }
.pr-sec--total .c-vhead__title img { width: calc(170.1 * var(--u)); margin-left: calc(50% - calc(84.4 * var(--u))); }
.pr-text { position: relative; top: calc(0.54 * var(--u)); margin: calc(109.56 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }
.pr-total { display: flex; align-items: flex-start; margin: calc(108.26 * var(--u)) 0 0 calc(50% - calc(359 * var(--u))); }
.pr-total__breakdown { position: relative; width: calc(350 * var(--u)); height: calc(427.05 * var(--u)); }
.pr-total__title { position: relative; top: calc(0.6 * var(--u)); text-align: center; font-size: calc(19 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0.05em; padding-left: 0.05em; }
.pr-total__breakdown::before, .pr-total__breakdown::after {
  content: ""; position: absolute; left: 0; width: calc(350 * var(--u)); height: calc(1 * var(--u)); background: rgba(44, 35, 33, .35);
}
.pr-total__breakdown::before { top: calc(46.78 * var(--u)); }
.pr-total__breakdown::after { top: calc(320.78 * var(--u)); }
.pr-total__list { position: absolute; left: 0; top: calc(66.74 * var(--u)); width: 100%; text-align: center; font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); }
.pr-total__list li { position: relative; top: calc(0.54 * var(--u)); white-space: pre; }
.pr-total__list b { font-weight: 500; }
/* ＝ は XD で 90度回して縦向き（文字の基準点 165,331.28 を中心に回転）。基準線は箱の上から calc(27 * var(--u))（このフォント・行高 calc(32 * var(--u)) のとき実測）
   2026-10-29 U60 RYO「ここデザインと違う」「イコールが縦になってない」 */
.pr-total__eq { position: absolute; left: calc(165 * var(--u)); top: calc(304.28 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(32 * var(--u)); color: var(--c-accent); transform-origin: 0 calc(27 * var(--u)); transform: rotate(90deg); }
.pr-total__sum { position: absolute; left: 0; top: calc(360 * var(--u)); width: 100%; text-align: center; font-size: calc(19 * var(--u)); font-weight: 500; line-height: calc(22 * var(--u)); color: var(--c-accent); }
.pr-total__note { position: absolute; left: 0; top: calc(399.55 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(28 * var(--u)); white-space: nowrap; }
.pr-total__example { position: relative; width: calc(350 * var(--u)); height: calc(271 * var(--u)); margin: calc(0.28 * var(--u)) 0 0 calc(59 * var(--u)); background: #fff; border-radius: calc(5 * var(--u)); }
.pr-total__example .pr-total__title { position: absolute; left: 0; top: calc(19.32 * var(--u)); width: 100%; }
.pr-total__model {
  position: absolute; left: calc(26 * var(--u)); top: calc(60 * var(--u)); width: calc(298 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(3 * var(--u));
  background: #4b4442; color: #fff; text-align: center;
  font-size: calc(15 * var(--u)); font-weight: 500; line-height: calc(28 * var(--u)); padding-top: calc(2 * var(--u));
}
.pr-total__rows { position: absolute; left: calc(27 * var(--u)); top: calc(107 * var(--u)); width: calc(299 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; line-height: calc(28 * var(--u)); }
.pr-total__rows div { display: flex; justify-content: space-between; white-space: nowrap; }
.pr-total__rows dd { margin: 0; }
.pr-total__rows .sum { margin-top: calc(28 * var(--u)); }
.pr-total__example::after { content: ""; position: absolute; left: calc(28.1 * var(--u)); top: calc(176.5 * var(--u)); width: calc(297.5 * var(--u)); height: calc(1 * var(--u)); background: rgba(44, 35, 33, .35); }
.pr-total__exnote { position: absolute; left: calc(28 * var(--u)); top: calc(225.83 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(22 * var(--u)); }
.pr-photo--2 { margin-top: calc(152.23 * var(--u)); }

.pr-sec--include { padding-top: calc(90 * var(--u)); }
.pr-sec--include .c-vhead__title img { width: calc(38.9 * var(--u)); }
.pr-include { position: relative; height: calc(249.96 * var(--u)); margin-top: calc(109.2 * var(--u)); }
.pr-include__col { position: absolute; top: 0; }
.pr-include__col--in { left: calc(50% - calc(260 * var(--u))); top: calc(1 * var(--u)); }
.pr-include__col--out { left: calc(50% + calc(59 * var(--u))); }
.pr-include__label {
  width: calc(201 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(3 * var(--u)); color: #fff;
  padding: calc(2.96 * var(--u)) 0 0 calc(16 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u));
}
.pr-include__col--in .pr-include__label { background: var(--c-accent); }
.pr-include__col--out .pr-include__label { background: #4b4442; }
.pr-include__list { padding-left: calc(17 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; white-space: nowrap; }
.pr-include__list li { position: relative; }
.pr-include__list li::before {
  content: "●"; position: absolute; left: calc(-17 * var(--u)); font-size: calc(9 * var(--u));
}
.pr-include__col--in .pr-include__list { margin-top: calc(15.96 * var(--u)); line-height: calc(25 * var(--u)); }
.pr-include__col--in .pr-include__list li { top: calc(0.5 * var(--u)); }
.pr-include__col--in .pr-include__list li + li { margin-top: calc(6 * var(--u)); }
.pr-include__col--in .pr-include__list li::before { line-height: calc(25 * var(--u)); color: var(--c-accent); top: calc(0.5 * var(--u)); }
/* ●の縦位置：XD では●が文字と別のテキストで、行ごとに位置が違う（XD の座標に合わせる。2026-10-26 ディレクター指摘 N1） */
.pr-include__col--in .pr-include__list li:nth-child(3)::before { top: calc(1.5 * var(--u)); }
.pr-include__col--in .pr-include__list li:nth-child(4)::before,
.pr-include__col--in .pr-include__list li:nth-child(5)::before { top: calc(-0.5 * var(--u)); }
.pr-include__col--out .pr-include__list { margin-top: calc(12.96 * var(--u)); line-height: calc(31 * var(--u)); }
.pr-include__col--out .pr-include__list li { top: calc(0.5 * var(--u)); }
.pr-include__col--out .pr-include__list li::before { line-height: calc(31 * var(--u)); color: #4b4442; top: calc(1 * var(--u)); }
.pr-sec--include .c-icon { margin: calc(68.04 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); }
.pr-lead { position: relative; top: calc(0.5 * var(--u)); margin: calc(12.15 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(30 * var(--u)); }
.pr-small { position: relative; top: calc(0.54 * var(--u)); margin: calc(29.31 * var(--u)) 0 0 calc(50% - calc(400 * var(--u))); font-size: calc(15 * var(--u)); line-height: calc(28 * var(--u)); }

/* ---------- TB ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .pg-price .c-label { margin-left: 32px; }
  .pr-h1, .pr-intro, .pr-text, .pr-sec--include .c-icon, .pr-lead, .pr-small { margin-left: 64px; margin-right: 32px; }
  .pr-head { height: auto; padding-bottom: 40px; }
  .pr-illust { position: relative; left: auto; top: auto; width: min(703px, 80%); margin: 24px 32px 0 auto; }
  .c-vhead__side { left: auto; right: 32px; }
  .pr-cards { width: auto; height: auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 43px 24px; }
  .pr-card { position: relative; left: auto !important; top: auto !important; width: auto; }
  .pr-total { flex-wrap: wrap; justify-content: center; gap: 40px; margin-left: 32px; margin-right: 32px; }
  .pr-total__example { margin-left: 0; }
  .pr-include__col--in { left: 64px; }
  .pr-include__col--out { left: auto; right: 64px; }
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .sp-ls { letter-spacing: -0.2em; }
  .pr-head { height: auto; }
  .pg-price .c-label { width: auto; }
  .c-label__sp { position: relative; display: block; height: calc(21 * var(--u)); }
  .c-label__sp img:first-child { position: absolute; left: 0; top: 0; width: calc(37 * var(--u)); height: calc(21 * var(--u)); }
  .c-label__sp img:last-child { position: absolute; left: calc(51 * var(--u)); top: calc(4.1 * var(--u)); width: calc(139 * var(--u)); height: auto; }
  .pr-h1 { margin: calc(60 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pr-h1 :is(img, .c-chars) { width: calc(350 * var(--u)); }
  .pr-intro { margin: calc(41.86 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pr-illust { position: static; width: calc(390 * var(--u)); margin-top: calc(24.54 * var(--u)); }
  .pr-blue { margin-top: calc(7 * var(--u)); padding-bottom: calc(108.04 * var(--u)); }
  .pr-sec--process { padding-top: calc(78 * var(--u)); }
  .pr-sec--process .c-vhead__title img { width: calc(128.2 * var(--u)); }
  .pr-process { width: calc(326 * var(--u)); margin: calc(70.6 * var(--u)) 0 0 calc(32 * var(--u)); }
  .pr-cards__title { margin-top: calc(79.72 * var(--u)); }
  .pr-cards { width: calc(350 * var(--u)); height: auto; margin: calc(38.28 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pr-card { position: relative; left: auto !important; top: auto !important; margin-top: calc(43 * var(--u)); }
  .pr-card--1 { margin-top: 0; }
  .pr-count { margin: calc(53 * var(--u)) 0 0 calc(32 * var(--u)); }
  .pr-photo img { aspect-ratio: 390 / 316; }
  .pr-photo--1 { margin-top: calc(103 * var(--u)); }
  .pr-sec--total { padding-top: calc(72 * var(--u)); }
  .pr-sec--total .c-vhead__title img { width: calc(128.7 * var(--u)); margin-left: calc(20 * var(--u)); }
  .pr-text { margin: calc(80.46 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pr-total { display: block; margin: calc(74.26 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pr-total__example { margin: calc(38.23 * var(--u)) 0 0 0; }
  .pr-photo--2 { margin-top: calc(78 * var(--u)); }
  .pr-sec--include { padding-top: calc(72 * var(--u)); }
  .pr-sec--include .c-vhead__title img { width: calc(29.6 * var(--u)); margin-left: calc(69.5 * var(--u)); }
  .pr-include { height: auto; margin-top: calc(53.1 * var(--u)); }
  .pr-include__col { position: static; margin-left: calc(20 * var(--u)); }
  .pr-include__col--out { margin-top: calc(43.04 * var(--u)); }
  .pr-sec--include .c-icon { margin: calc(38.04 * var(--u)) 0 0 calc(20 * var(--u)); }
  .pr-lead { margin-left: calc(20 * var(--u)); }
  .pr-small { margin-left: calc(20 * var(--u)); }
}

/* 1024〜1239px：PC の組み方のままだとイラスト（703px）が本文に大きく重なり右端が切れるため、
   画面幅に比例して縮め、右端に揃える（1240px 以上は XD どおり。2026-10-26 ディレクター指摘 N6） */
@media (min-width: 1024px) and (max-width: 1239px) {
  .pr-illust { left: auto; right: 0; width: 50.21vw; }
}
