/* ==========================================================================
   Sections
   ========================================================================== */

/* --- Campaign (Figma: Frame 20 / Frame 49) ------------------------------- */
.sec-campaign {
  padding-block: var(--space-800);
}

/* Figma SP: 3つ目（Frame 45）は下余白なしでCVに続く */
@media (max-width: 767px) {
  .sec-campaign--flush { padding-bottom: 0; }
}

/* --- Section heading (傍点付きサブ見出し + 大見出し) ----------------------- */
.sec-head {
  --accent: var(--secondary-500);
  --accent-text: var(--secondary-700);
  display: grid;
  justify-items: center;
  text-align: center;
}

.sec-head--blue {
  --accent: var(--primary-500);
  --accent-text: var(--primary-700);
}

.sec-head__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin-bottom: 12px;
  padding: 0 12px 3px 16px;
  border-radius: var(--radius-full);
  background: var(--primary-500);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.sec-head__badge small { font-size: 18px; }
.sec-head__badge .ex { display: inline-block; width: 13.816px; margin-left: 2px; text-align: center; text-indent: 0.08em; rotate: 24deg; } /* Figma: 「!」は幅13.8pxの枠の中央 */

.sec-head__sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.sec-head__sub::before,
.sec-head__sub::after {
  content: "";
  flex: none;
  width: 16px;
  height: 28px;
  margin-top: 2px;
  background: var(--accent);
  -webkit-mask: url("../img/head-slash-l.svg") center / 18px 30px no-repeat;
  mask: url("../img/head-slash-l.svg") center / 18px 30px no-repeat;
}

/* 「＼ テキスト ／」: 元SVGが「＼」なので右側だけ反転 */
.sec-head__sub::after {
  transform: scaleX(-1);
}

.sec-head__sub em {
  position: relative;
  color: var(--accent-text);
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* 見出しごとのFigmaの字間 */
.sec-cases .sec-head__sub,
.sec-cases .sec-head__sub em { letter-spacing: 0.04em; }
.sec-voice .sec-head__sub em,
.sec-faq .sec-head__sub em { letter-spacing: 0.042em; }
.sec-voice .sec-head__sub em small { letter-spacing: 0.049em; }
.sec-faq .sec-head__sub .pre { letter-spacing: 0.06em; }

/* 傍点：.dot 内の各文字の中心に 7px の点 */
.sec-head__sub .dot {
  position: relative;
}

.sec-head__sub .dot::before {
  content: "";
  position: absolute;
  top: -7px; /* Figma: 点の上端 = 小見出しの枠の上端 */
  left: 0;
  right: 0.06em;
  height: 7px;
  background: radial-gradient(circle at 3.5px 3.5px, var(--accent) 3.5px, transparent 3.7px) calc(0.5em - 3.5px) 0 / 1.06em 7px repeat-x;
}

.sec-head__title {
  font-size: 44px;
  font-weight: 900;
  line-height: 70px; /* Figma: 44px×1.6=70.4 → 70 */
  letter-spacing: 0.14em;
}

.sec-head__title .t1 { letter-spacing: 0.022em; }
.sec-head__title .t2 { letter-spacing: 0.029em; }

/* --- Area (Figma: Frame 21 / area) --------------------------------------- */
.sec-area {
  padding: 38px 0 32px;
}

.area__body {
  display: grid;
  gap: 24px;
  margin-top: 22px;
}

.area-map {
  --u: calc(100cqw / 342);
  aspect-ratio: 342 / 257;
  overflow: hidden;
  border-radius: calc(8 * var(--u));
}

.area-map .ab__canvas {
  --u: calc(100cqw / 342);
}

.area-map__land {
  left: 0;
  top: calc(-15.91 * var(--u));
  width: 100%;
  height: auto;
  max-width: none;
}

.area-map__rings {
  left: 50%;
  top: 50%;
  width: calc(256 * var(--u));
  height: calc(257 * var(--u));
  max-width: none;
  translate: -50% -50%;
}

.area-map__truck {
  left: calc(55.47 * var(--u) + (230 - 217) / 2 * var(--u));
  top: calc(54 * var(--u) + (149.2 - 124.9) / 2 * var(--u));
  width: calc(217 * var(--u));
  height: calc(124.9 * var(--u));
  max-width: none;
  rotate: -6.66deg;
  scale: -1 1;
}

.area-map__badge {
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: calc(103 * var(--u));
  height: calc(103 * var(--u));
  padding-bottom: calc(2 * var(--u));
  border: calc(4 * var(--u)) solid var(--white);
  border-radius: 50%;
  background: var(--attention);
  color: var(--white);
  font-size: calc(20 * var(--u));
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
}

.area-card {
  display: grid;
  justify-items: center;
  gap: var(--space-200);
  padding: 22px; /* Figmaの内側2px線の分を差し引いた24px */
  border: 2px solid var(--gray-2);
  border-radius: var(--radius-400);
}

.area-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  justify-self: stretch;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.area-card__title img {
  width: 32px;
  height: 32px;
}

.area-card__list {
  position: relative;
  max-height: 100px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  word-break: break-all;
  transition: max-height 0.4s ease;
}

.area-card__list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
  transition: opacity 0.3s;
}

.area-card.is-open .area-card__list::after {
  opacity: 0;
}

.area-card__more {
  color: var(--primary-500);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 768px) {
  .sec-area {
    padding: 48px 0;
  }

  .area__body {
    grid-template-columns: 513px 1fr;
    align-items: center;
    gap: 32px;
    margin-top: 32px;
  }

  .area-map {
    border-radius: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1047px) {
  .area__body {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- City skyline -------------------------------------------------------- */
.city {
  height: 80px;
  background: url("../img/city-01-sp.svg") center bottom / auto 80px repeat-x;
}

.city--02 {
  background-image: url("../img/city-02-sp.svg");
}

@media (min-width: 768px) {
  .city { background-image: url("../img/city-01-pc.svg"); }
  .city--02 { background-image: url("../img/city-02-pc.svg"); }
}

/* --- Cases (Figma: Frame 34 買取事例) ------------------------------------ */
.sec-cases {
  padding: 32px 0;
  background: var(--gray-2);
}

.cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 32px;
}

.case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-200);
  padding: var(--space-300) var(--space-400);
  border-radius: var(--radius-200);
  background: var(--white);
}

.case__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: center;
}

.case__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.case__img--bottom {
  object-position: bottom;
}

.case__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-100);
  margin-top: auto;
  color: var(--primary-500);
  white-space: nowrap;
}

.case__label {
  padding: var(--space-100) var(--space-150);
  border-radius: var(--radius-100);
  background: var(--primary-100);
  color: var(--black);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
}

.case__yen {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.case__num {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.8;
  letter-spacing: 0;
}

.cases__note {
  margin-top: 32px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
  text-align: center;
}

@media (min-width: 380px) {
  .cases__note { white-space: nowrap; }
}

.cases__note .k { letter-spacing: 0.27em; }
.cases__note .t { letter-spacing: -0.213em; }
@media (min-width: 768px) {
  .cases__note .t { letter-spacing: -0.16em; }
}

@media (min-width: 768px) {
  .sec-cases {
    padding: 48px 0;
  }

  .cases {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .cases__note {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 959px) {
  .cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Worries (Figma: Frame 37 こんなお悩み、ありませんか？) --------------- */
.sec-worry {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #9aa9b9 20%, rgba(154, 169, 185, 0.2) 100%), var(--white);
}

.worry__bar {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 60px;
  background: var(--primary-700);
  color: var(--white);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.worry__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 26px;
  height: 14px;
  translate: -50% 0;
  background: var(--primary-700);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.worry__bar em {
  font-style: normal;
  color: var(--highlight);
}

.worry__bar .q {
  display: inline-block;
  margin-left: -0.1em;
  font-size: 1.1667em;
  line-height: 1;
  rotate: 22.16deg;
}

.worry__stage {
  --u: calc(100cqw / 390);
  aspect-ratio: 390 / 610;
}

.worry__stage .ab__canvas {
  --u: calc(100cqw / 390);
}

.worry__floor {
  left: calc(-55 * var(--u));
  top: calc(425.71 * var(--u));
  width: calc(500 * var(--u));
  height: calc(344 * var(--u));
  border-radius: 50%;
  background: var(--white);
}

.worry__woman {
  left: calc(16 * var(--u));
  top: calc(365 * var(--u));
  width: calc(358 * var(--u));
  height: calc(236 * var(--u));
  max-width: none;
  object-fit: cover;
  object-position: bottom;
}

.worry__cloud {
  left: calc(-23 * var(--u));
  top: calc(8 * var(--u));
  width: calc(446 * var(--u));
  height: calc(417 * var(--u));
  max-width: none;
}

.worry__stage ul {
  inset: 0;
}

.worry__item {
  position: absolute;
  translate: 0 -50%;
  color: var(--black);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.worry__item .hl {
  display: inline-block;
  padding: 0 0.25em 0 0.2em;
  background: var(--primary-100);
  color: var(--primary-700);
  font-size: 1.2em;
  letter-spacing: 0.04em;
}

.worry__item .hl small { font-size: 0.9167em; }
.worry__item .t-2 { letter-spacing: -0.08em; }
.worry__item .t-16 { letter-spacing: -0.16em; }
.worry__item .t-10 { letter-spacing: -0.1em; }
.worry__item .t0 { letter-spacing: 0; }
.worry__item .t2 { letter-spacing: 0.02em; }
.worry__item .t3 { letter-spacing: 0.033em; }
.worry__item .t-4 { letter-spacing: -0.04em; }
.worry__item .lg { font-size: 1.2em; letter-spacing: 0.05em; }

.worry__item--1 { left: calc(16 * var(--u)); top: calc(58 * var(--u)); }
.worry__item--2 { left: calc(135 * var(--u)); top: calc(138 * var(--u)); }
.worry__item--3 { left: calc(16 * var(--u)); top: calc(218.5 * var(--u)); }
.worry__item--4 { left: calc(111 * var(--u)); top: calc(298 * var(--u)); }

.worry__item--2 > span:first-child,
.worry__item--4 > span:first-child {
  padding-left: calc(6 * var(--u));
}

@media (min-width: 768px) {
  .worry__bar {
    height: 70px;
    font-size: 36px;
  }

  .worry__stage {
    max-width: var(--container);
    margin-inline: auto;
    aspect-ratio: 1000 / 730;
  }

  .worry__stage .ab__canvas {
    --u: calc(100cqw / 1000);
  }

  .worry__floor { left: calc(-220 * var(--u)); top: calc(573 * var(--u)); width: calc(1440 * var(--u)); }
  .worry__woman { left: calc(231 * var(--u)); top: calc(397 * var(--u)); width: calc(537 * var(--u)); height: calc(354 * var(--u)); }
  .worry__cloud { left: calc(96.96 * var(--u)); top: calc(30.02 * var(--u)); width: calc(806.08 * var(--u)); height: calc(422.95 * var(--u)); }

  .worry__item { font-size: calc(24 * var(--u)); }
  .worry__item br { display: none; }
  .worry__item--1 { left: calc(140 * var(--u)); top: calc(76 * var(--u)); }
  .worry__item--2 { left: calc(422 * var(--u)); top: calc(156.66 * var(--u)); }
  .worry__item--3 { left: calc(180 * var(--u)); top: calc(237.06 * var(--u)); }
  .worry__item--4 { left: calc(342 * var(--u)); top: calc(322 * var(--u)); }

  .worry__item--2 > span:first-child,
  .worry__item--4 > span:first-child {
    padding-left: 0;
  }
}

/* --- Promise (Figma: Frame 49 / Frame 47 少しでも高く売りたい) ----------- */
.sec-promise {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(93.09deg, #064c97 0%, #0062ed 100%);
  color: var(--white);
  text-align: center;
}

.sec-promise::before {
  content: "";
  display: block;
  height: 50px;
  background: var(--white);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.promise__pattern {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: calc(50% - 100.5px);
  width: 663px;
  max-width: none;
  height: 410px;
  translate: -50% 0;
  object-fit: cover;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}

.promise__intro {
  padding-top: 24px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.promise__lead {
  font-size: 24px;
  letter-spacing: 0.04em;
}

.promise__lead small { font-size: 0.75em; letter-spacing: 0.08em; }
.promise__lead .t-22 { letter-spacing: -0.22em; }
.promise__lead .t-16 { letter-spacing: -0.16em; }
.promise__lead .t-19 { letter-spacing: -0.19em; }
.promise__lead .t0 { letter-spacing: 0; }
.promise__lead .t6 { letter-spacing: 0.06em; }
.promise__lead .t7 { letter-spacing: 0.07em; }

.promise__wish {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Figma: 黄色の帯（506×69）と文字枠を同じ -2° で重ね、「！」は全角スペースの上に別置き。
   数値は帯の文字サイズ（PC 43.942px / SP 29.295px）基準の em */
.promise__band {
  position: relative;
  display: block;
  width: 11.5205em;
  height: 1.5703em;
  margin-top: 5px;
  rotate: -2deg;
  background: var(--highlight);
  color: var(--primary-700);
  font-size: 29.295px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0;
}

.promise__band-text {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: calc(-50% + 0.0355em) calc(-50% - 0.0273em);
  white-space: nowrap;
}

.promise__band small { font-size: 0.7143em; letter-spacing: 0.04em; }
.promise__band .t-2 { letter-spacing: -0.02em; }
.promise__band .t-5 { letter-spacing: -0.05em; }
.promise__band .t-8 { letter-spacing: -0.08em; }
.promise__band .t3 { letter-spacing: 0.03em; }
.promise__band .t4 { letter-spacing: 0.04em; }
.promise__band .t-20 { letter-spacing: -0.2em; }
.promise__band .ex {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: calc(-50% + 4.245em) calc(-50% - 0.0114em);
  rotate: 30deg;
  font-size: 1.1429em;
}

.promise__think {
  margin-top: 8px;
  font-size: 24px;
  letter-spacing: 0.06em;
}

.promise__think small { font-size: 0.75em; }

.promise__brand {
  display: grid;
  place-content: center;
  height: 134px;
  margin-top: 17px;
  background: var(--white);
  color: var(--primary-700);
  font-weight: 900;
  line-height: 1.6;
}

.promise__brand-name {
  display: grid;
  font-size: 42px;
  letter-spacing: 0.03em;
  transform: skewX(-10deg);
}

.promise__brand-name > span {
  position: relative;
  grid-area: 1 / 1;
}

/* 紺の影（Figmaの重ね文字）+ 白文字 */
.promise__brand-name .back {
  translate: 3px 4px;
  color: var(--primary-700);
  -webkit-text-stroke: 4px var(--primary-700);
}

/* 白文字にも紺のフチ（data-stroke で背面に複製） */
.promise__brand-name .front {
  --stroke-w: 4px;
  --stroke-c: var(--primary-700);
  color: var(--white);
}

.promise__brand-name .t-4 { letter-spacing: -0.04em; }
.promise__brand-name .t-7 { letter-spacing: -0.07em; }
.promise__brand-name .t-1 { letter-spacing: -0.01em; }
.promise__brand-name .t5 { letter-spacing: 0.05em; }

/* Figma: ロゴ文字は帯の上端から SP 9.3px / PC 13.9px、コピーは SP 75.3px / PC 112.9px */
.promise__brand-name { margin-top: -5.7px; }

.promise__brand-copy {
  margin-top: -1.2px;
  font-size: 28px;
  letter-spacing: 0.04em;
}

.promise__brand-copy small { font-size: 20px; letter-spacing: 0.1em; line-height: 1.8; }
.promise__brand-copy .t-2 { letter-spacing: -0.02em; }
.promise__brand-copy .t0 { letter-spacing: 0; }
.promise__brand-copy .t-19 { letter-spacing: -0.19em; }

.promise__guide {
  position: relative;
  width: 342px;
  height: 146px;
  margin: 11px auto 0;
}

.promise__bubble {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 85px;
  height: 85px;
  padding: 3px 17px 5px 8px;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary-500);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.promise__bubble small { font-size: 12px; }

.promise__staff {
  position: absolute;
  left: 24px;
  top: 31px;
  width: 110px;
  height: 115px;
  max-width: none;
  scale: -1 1;
}

.promise__visit {
  position: absolute;
  left: 242px;
  top: 72px;
  translate: -50% -50%;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.promise__visit .l {
  display: inline-block;
  font-size: 24px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--white);
}

.promise__visit .l small { font-size: 16px; letter-spacing: 0.06em; }
.promise__visit .l .m { font-size: 20px; letter-spacing: 0.04em; }
.promise__visit .t2 { letter-spacing: 0.02em !important; }
.promise__visit .t3 { letter-spacing: 0.03em; }

@media (min-width: 768px) {
  .sec-promise {
    background: linear-gradient(100.17deg, #064c97 0%, #0062ed 100%);
  }

  .sec-promise::before {
    height: 80px;
  }

  .promise__pattern {
    top: -41px;
    left: calc(50% - 343.5px);
    width: 994.5px;
    height: 615px;
  }

  .promise__intro {
    padding-top: 40px;
  }

  .promise__lead {
    font-size: 36px;
  }

  .promise__wish {
    flex-direction: row;
    justify-content: center;
    gap: 12.5px;
    margin-left: 19.5px;
  }

  .promise__band {
    margin-top: 19px;
    font-size: 43.942px;
  }

  .promise__think {
    margin-top: 31.8px;
    font-size: 36px;
  }

  .promise__brand {
    height: 201px;
    margin-top: 35px;
  }

  .promise__brand-name {
    font-size: 63px;
  }

  .promise__brand-name .back {
    translate: 4.5px 6px;
    -webkit-text-stroke-width: 6px;
  }

  .promise__brand-name .front { --stroke-w: 6px; }

  .promise__brand-name { margin-top: -8.6px; }

  .promise__brand-copy {
    margin-top: -1.8px;
    font-size: 42px;
  }

  .promise__brand-copy small { font-size: 30px; }

  .promise__guide {
    width: 800px;
    height: 170px;
    margin-top: 24px;
  }

  .promise__bubble {
    width: 127.5px;
    height: 127.5px;
    padding: 4px 26px 7px 12.5px;
    font-size: 19.5px;
  }

  .promise__bubble small { font-size: 18px; }

  .promise__staff {
    left: 98px;
    top: 0.5px;
    width: 165px;
    height: 170px;
    scale: none;
  }

  .promise__visit {
    left: 272px;
    right: 0;
    top: 62.84px;
    translate: 0 -50%;
    border-bottom: 1.72px solid var(--white);
    font-size: 27.4px;
  }

  .promise__visit br { display: none; }

  .promise__visit .l {
    border-bottom: 0;
    font-size: 41.1px;
  }

  .promise__visit .l small { font-size: 27.4px; }
  .promise__visit .l .m { font-size: 34.25px; }
}

/* 768〜879px: 横幅約780pxの行が収まらないため縮小 */
@media (min-width: 768px) and (max-width: 879px) {
  .promise__wish,
  .promise__guide { zoom: 0.9; }
}

.cv--clear {
  margin-top: -24px; /* Figma: ガイド行とCVの枠が重なっている */
  background: none;
}

@media (min-width: 768px) {
  .cv--clear { margin-top: -26px; }
}

/* --- Points (Figma: Frame 50 地域密着モデル / point 01-03) --------------- */
.sec-points {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: 32.7px 0 32.3px;
  background: var(--primary-100);
}

/* 上部の白い台形＋楕円（Figma: Union） */
.sec-points::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 435px;
  height: 239px;
  translate: -50% 0;
  background:
    linear-gradient(var(--white), var(--white)) center top / 395px 146px no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 50%, var(--white) 99.5%, transparent 100%) center 24px / 435px 215px no-repeat;
}

.points__head {
  display: grid;
  justify-items: center;
  text-align: center;
  font-weight: 900;
  white-space: nowrap;
}

.points__model {
  position: relative;
  display: flex;
  align-items: baseline;
  padding: 0 20px 0 28px;
}

.points__model::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 70px;
  height: 61px;
  background: url("../img/area-map.svg") left top / contain no-repeat;
}

.points__model::after {
  content: "";
  position: absolute;
  right: 0;
  top: 13px;
  width: 16px;
  height: 14px;
  background: url("../img/points-spark.svg") center / contain no-repeat;
  rotate: 9.68deg;
}

.points__model-main {
  color: var(--secondary-700);
  font-size: 28px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  --stroke-w: 3px;
}

.points__model-sub {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: -0.02em;
}

.points__model-sub .t5 { letter-spacing: 0.05em; }
.points__model-sub .t-4 { letter-spacing: -0.04em; }

.points__copy {
  position: relative;
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.points__copy b {
  position: relative;
  font-size: 1.1667em;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.points__copy .t2 { letter-spacing: 0.02em; }
.points__copy .t3 { letter-spacing: 0.03em; }
.points__copy .t11 { letter-spacing: 0.11em; }

/* 「真似できない」の上の傍点（Figma: テキスト枠の上端に等間隔。SP 7px/26px間隔、PC 10.5px/39px間隔） */
.points__copy .dots {
  position: relative;
}

.points__copy .dots::before {
  content: "";
  position: absolute;
  left: 11.2px;
  top: -9px;
  width: calc(26px * 5 + 7px);
  height: 7px;
  background: radial-gradient(circle at 3.5px 3.5px, var(--primary-500) 3.4px, transparent 3.6px) 0 0 / 26px 7px repeat-x;
}

.points__title {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: -13px;
  font-size: 41.455px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.points__title em {
  display: grid;
  place-items: center start;
  height: 52px;
  padding: 0 0 0.06em 8px;
  background: var(--attention);
  color: var(--white);
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.points__title em .t26 { letter-spacing: 0.26em; }

.points__title small {
  font-size: 0.8em;
  letter-spacing: 0.05em;
}

.points__title .ex {
  display: inline-block;
  font-size: 1.125em;
  rotate: 32deg;
}

.points__lead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 13px;
}

.points__diff {
  position: relative;
  padding-bottom: 12px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  background: url("../img/points-wave.svg") left bottom / 100% 5px no-repeat;
}

.points__diff .hl {
  display: inline-block;
  padding: 0 0.1em;
  background: linear-gradient(transparent 12%, var(--highlight) 12%, var(--highlight) 92%, transparent 92%);
  font-size: 23.19px;
  letter-spacing: 0.03em;
}

.points__diff .s { font-size: 18.127px; letter-spacing: 0.06em; }
.points__diff .s.t10 { letter-spacing: 0.103em; }
.points__diff .l { font-size: 27.191px; line-height: 1.23; }
.points__diff .m { font-size: 22.659px; line-height: 1.23; }
.points__diff .l.ex { font-size: 24.925px; letter-spacing: 0.04em; }
.points__diff .t10 { letter-spacing: 0.1em; }
.points__diff .t24 { letter-spacing: 0.24em; }
.points__diff .t-6 { letter-spacing: -0.06em; }
.points__diff .t-7 { letter-spacing: -0.07em; }
.points__diff .t-23 { letter-spacing: -0.23em; }

.points__man {
  position: relative;
  flex: none;
  width: 114px;
  height: 140px;
  margin-right: 1px;
}

.points__man::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 111px;
  height: 111px;
  border-radius: 50%;
  background: var(--white);
}

.points__man img {
  position: relative;
  width: 100%;
  height: auto;
}

/* --- Point rows ---------------------------------------------------------- */
.points__list {
  display: grid;
  gap: 24px;
  margin-top: 0;
}

.point {
  --fs: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  font-size: var(--fs);
}

.point__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 483 / 325;
  border-radius: 0.444em;
}

.point__img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.point__img--03 > img:first-child {
  left: -34.5%;
  width: 103.1%;
}

.point__img--03 > img.point__img-b {
  left: 37.1%;
  width: 62.6%;
  top: 0;
}

/* Figma: 数字の下端は写真の下端に接する（写真の枠で少し切れる） */
.point__no {
  position: absolute;
  right: 0;
  bottom: -0.287em;
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  color: var(--white);
  font-family: var(--font-num);
  font-weight: 400;
  line-height: 1;
  opacity: 0.8;
  text-shadow: 0 0 0.67em rgba(55, 17, 9, 0.5);
}

.point__no small {
  font-size: 2.355em;
  letter-spacing: 0;
}

.point__no span {
  font-size: 3.889em;
  letter-spacing: -0.04em;
}

/* Figma: 01 だけ字間 -8% */
.point:first-child .point__no span { letter-spacing: -0.08em; }

.point__table {
  display: grid;
}

.point__row {
  display: grid;
  grid-template-columns: 63px minmax(0, 1fr); /* Figma: 左列65pxのうち2pxが右セルに重なる */
}

.point__row + .point__row {
  margin-top: -1px;
}

.point__who {
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 7px;
  border: 1px solid var(--black);
  margin-right: -2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: nowrap;
}

.point__who img {
  width: 24px;
  height: 24px;
}

.point__text {
  display: flex;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--black);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.point__row--us .point__who {
  border: 2px solid #064c97;
  background: var(--white);
  font-size: 14px;
  letter-spacing: 0.06em;
}

.point__row--us .point__who img {
  width: 45px;
  height: auto;
}

.point__row--us .point__text {
  padding: 10px 10px 14px;
  border: 2px solid var(--primary-500);
  background: var(--white);
  font-size: 1.1111em;
  letter-spacing: 0.02em;
}

@media (min-width: 380px) {
  /* 改行位置は<br>で固定（Chromeの字幅がFigmaより約1px広く、折り返してしまうため） */
  .point__text { white-space: nowrap; }
}

/* Figma SP: 弊社側のセルは枠線込みで左右10px */
@media (max-width: 767px) {
  .point__row--us .point__text {
    padding-inline: 8px;
  }
}

.point__text strong {
  color: var(--attention);
  font-size: 1.2em;
  font-weight: 900;
}

.point__text .t0 { letter-spacing: 0; }
.point__text .t1 { letter-spacing: 0.015em; }
.point__text .t7 { letter-spacing: 0.07em; }
.point__text .t-2 { letter-spacing: -0.02em; }
.point__text .t-3 { letter-spacing: -0.03em; }
.point__text .t-8 { letter-spacing: -0.08em; }
.point__text .t-14 { letter-spacing: -0.14em; }
.point__text .t-4 { letter-spacing: -0.04em; }
.point__text .t-6 { letter-spacing: -0.06em; }
.point__text .t-9 { letter-spacing: -0.09em; }
.point__text .t-15 { letter-spacing: -0.15em; }
.point__text .t12 { letter-spacing: 0.12em; }
.point__text small { font-size: 0.9167em; }
.point__text small.s { font-size: 0.8333em; }

@media (min-width: 768px) {
  .sec-points {
    padding: 38.5px 0 50px;
  }

  /* Figma: 1440px幅に対して1593px。広い画面でも左右が切れないよう比率で広げる */
  .sec-points::before {
    width: max(1593px, 110.625%);
    height: 300px;
    background: url("../img/points-bg-pc.svg") center top / 100% 100% no-repeat;
  }

  /* Figma PC: 地図 88×76.8（x438）、文字は地図の左端から51px。行全体はやや左寄り */
  .points__model {
    left: -23px;
    padding: 0 27.3px 0 51px;
  }

  .points__model::before {
    width: 88px;
    height: 76.8px;
    top: -6.4px;
  }

  .points__model::after {
    top: 12px;
    width: 24.6px;
    height: 22px;
  }

  .points__model-main { font-size: 42px; --stroke-w: 4.5px; }
  .points__model-sub { font-size: 27px; }

  .points__copy {
    margin-top: 10px;
    font-size: 36px;
  }

  .points__copy .dots::before {
    left: 16.8px;
    top: -14px;
    width: calc(39px * 5 + 10.5px);
    height: 10.5px;
    background: radial-gradient(circle at 5.25px 5.25px, var(--primary-500) 5.15px, transparent 5.35px) 0 0 / 39px 10.5px repeat-x;
  }

  .points__title {
    margin-top: -16.5px;
    font-size: 62.182px;
  }

  .points__title em {
    height: 78px;
    padding-left: 12px;
  }

  .points__lead {
    width: 600px;
    height: 210px;
    margin: -24px auto 0;
    padding: 0 0 0 35px;
    align-items: center;
  }

  .points__diff {
    padding-bottom: 20px;
    line-height: 1.4;
    background-size: 306px 7.5px;
    background-position: 22px bottom;
  }

  .points__diff .hl { font-size: 34.785px; }
  .points__diff .s { font-size: 27.191px; }
  .points__diff .l { font-size: 40.786px; line-height: 1.4; }
  .points__diff .m { font-size: 33.988px; line-height: 1.4; }
  .points__diff .l.ex { font-size: 37.387px; }
  .points__diff br.sp { display: none; }

  .points__man {
    width: 170px;
    height: 195px;
    align-self: flex-end;
    margin: 0 35px 0 0; /* Figma: 人物の下端 = 表の上端 */
  }

  .points__man::before {
    width: 166.7px;
    height: 166.7px;
    right: auto;
    left: 2px;
  }

  .points__list {
    margin-top: 0;
  }

  .point {
    --fs: 25.424px;
    grid-template-columns: minmax(0, 483fr) minmax(0, 493fr);
    gap: 24px;
    align-items: stretch;
    min-height: 324.86px;
  }

  /* 写真の高さは比較表に合わせる（aspect-ratio だと列幅を超えて広がるため解除） */
  .point__img {
    aspect-ratio: auto;
    min-height: 240px;
  }

  .point__row {
    grid-template-columns: 89px minmax(0, 1fr);
  }

  .point__table {
    grid-template-rows: 1fr 1fr;
  }

  .point__who {
    padding: 11.3px;
    border-width: 1.41px;
    margin-right: -2.8px;
    font-size: 16.95px;
  }

  .point__who img {
    width: 33.9px;
    height: 33.9px;
  }

  .point__text {
    padding: 16.95px;
    border-width: 1.41px;
  }

  .point__row--us .point__who {
    border-width: 2.83px;
    font-size: 19.77px;
  }

  .point__row--us .point__who img {
    width: 100%;
  }

  .point__row--us .point__text {
    padding: 16.95px 16.95px 22.6px;
    border-width: 2.83px;
  }
}

@media (min-width: 768px) and (max-width: 1047px) {
  .point { --fs: 20px; }
  .point__row--us .point__text { white-space: normal; }
}

/* --- Consult (Figma: Frame 51 そんなときでもお気軽にご相談ください) ------- */
.sec-consult {
  position: relative;
  overflow: hidden;
  background: linear-gradient(var(--primary-100), var(--white) 25.64%);
}

.consult__stage {
  --u: calc(100cqw / 390);
  aspect-ratio: 390 / 700;
}

.consult__stage .ab__canvas {
  --u: calc(100cqw / 390);
}

.consult__bubble {
  display: grid;
  place-items: center;
  background: center / 100% 100% no-repeat;
  color: var(--white);
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}

.consult__bubble span {
  translate: var(--tx, 0) var(--ty, 0);
}

.consult__bubble--1 {
  left: calc(24.3 * var(--u));
  top: calc(33.5 * var(--u));
  width: calc(113.5 * var(--u));
  height: calc(73 * var(--u));
  background-image: url("../img/consult-bubble-1.svg");
  letter-spacing: 0;
  --tx: calc(-2 * var(--u));
  --ty: calc(-7 * var(--u));
}

.consult__bubble--2 {
  left: calc(133 * var(--u));
  top: calc(56.2 * var(--u));
  width: calc(233 * var(--u));
  height: calc(81 * var(--u));
  background-image: url("../img/consult-bubble-2.svg");
  letter-spacing: 0.05em;
  --tx: calc(-6 * var(--u));
  --ty: calc(-3 * var(--u));
}

.consult__bubble--2 .t12 { letter-spacing: 0.12em; }
.consult__bubble--2 .t14 { letter-spacing: 0.14em; }
/* Figma: 「？」は本文の中央揃えに含めず、別に配置 */
.consult__bubble--2 > span { position: relative; }
.consult__bubble--2 .q { position: absolute; left: 100%; top: 0; display: inline-block; translate: calc(var(--tx, 0px) + 0.07em) calc(var(--ty, 0px) + 0.18em); rotate: 18.79deg; }

/* 青い帯（4°）+ 模様 + 水色の帯（-2°） */
.consult__band-blue,
.consult__band-light {
  left: 50%;
  width: calc(100vw + 120px);
  min-width: calc(451 * var(--u));
  height: calc(150 * var(--u));
  translate: -50% -50%;
}

.consult__band-blue {
  top: calc(260.2 * var(--u));
  rotate: 4deg;
  overflow: hidden;
  background: var(--primary-500);
}

.consult__band-blue img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: overlay;
  rotate: -4deg;
  scale: 1.1;
}

.consult__band-light {
  top: calc(276.5 * var(--u));
  rotate: -2deg;
  background: var(--primary-100);
}

.consult__label {
  left: calc(131.1 * var(--u));
  top: calc(180.3 * var(--u));
  display: grid;
  place-items: center;
  width: calc(214 * var(--u));
  height: calc(46 * var(--u));
  translate: -50% -50%;
  rotate: -2deg;
  background: var(--secondary-500);
  color: var(--white);
  font-size: calc(29.295 * var(--u));
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.consult__label small { font-size: 0.7143em; letter-spacing: 0.06em; }
.consult__label .t7 { letter-spacing: 0.07em; }
.consult__label .t-2 { letter-spacing: -0.02em; }
.consult__label .t-3 { letter-spacing: -0.03em; }
.consult__label .t5 { letter-spacing: 0.05em; }

.consult__title {
  inset: 0;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}

.consult__title > span {
  position: absolute;
  left: 50%;
  translate: -50% -50%;
}

.consult__title-a {
  top: calc(229.9 * var(--u));
  color: var(--primary-500);
  font-size: calc(54 * var(--u));
  letter-spacing: 0.049em;
}

.consult__title-a small { font-size: 0.8148em; letter-spacing: 0.06em; }

.consult__title-b {
  top: calc(290.9 * var(--u));
  color: var(--black);
  font-size: calc(44 * var(--u));
  font-weight: 700;
}

.consult__title-b { letter-spacing: 0.06em; }
.consult__title-b .t3 { letter-spacing: 0.03em; }
.consult__title-b .t8 { letter-spacing: 0.08em; }
.consult__title-b .t-5 { letter-spacing: -0.05em; }

/* 月桂樹 + 実績 */
.consult__laurel {
  top: calc(376 * var(--u));
  width: calc(45 * var(--u));
  height: calc(120 * var(--u));
  max-width: none;
}

.consult__laurel--l { left: calc(24 * var(--u)); }
.consult__laurel--r { left: calc(321 * var(--u)); }

.consult__stars {
  left: calc(157 * var(--u));
  top: calc(350.5 * var(--u));
  display: flex;
  justify-content: space-between;
  width: calc(76 * var(--u));
}

.consult__stars img {
  width: calc(20.8 * var(--u));
  height: calc(20 * var(--u));
}

.consult__stars img:nth-child(2) {
  translate: 0 calc(-4 * var(--u));
}

.consult__record {
  left: calc(195 * var(--u));
  top: calc(434 * var(--u));
  translate: -50% -50%;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}

.consult__record-a {
  display: block;
  font-size: 0.7143em;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.consult__record-b {
  display: block;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

.consult__record-b em {
  font-style: normal;
  color: var(--attention);
  font-size: 1.1786em;
  background: linear-gradient(transparent 58%, var(--highlight) 58%, var(--highlight) 88%, transparent 88%);
}

.consult__record .t0 { letter-spacing: 0; }
.consult__record .t5 { letter-spacing: 0.05em; }
.consult__record .t-9 { letter-spacing: -0.09em; }
/* Figma: 「！」は「あります」の中央揃えに含めず、別に配置 */
.consult__record > span:last-child { position: relative; }
.consult__record .ex { position: absolute; left: 100%; top: 0; display: inline-block; translate: -0.6em 0.025em; rotate: 30deg; font-size: 1.107em; }

/* 私たちにお任せください */
.consult__circle {
  left: calc(26 * var(--u));
  top: calc(507.7 * var(--u));
  display: grid;
  place-content: center;
  width: calc(135 * var(--u));
  height: calc(135 * var(--u));
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary-500);
  font-size: calc(18 * var(--u));
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

/* Figmaの字間はPC/SPで同じpx値（アートボード単位で指定） */
.consult__circle { letter-spacing: 0; }
.consult__circle .c1 { letter-spacing: calc(0.8 * var(--u)); }
.consult__circle .c2 { letter-spacing: calc(0.96 * var(--u)); }
.consult__circle .c3 { letter-spacing: calc(-1.6 * var(--u)); }
.consult__circle .c4 { letter-spacing: calc(-0.32 * var(--u)); }

.consult__spark {
  left: calc(26 * var(--u));
  top: calc(527.5 * var(--u));
  width: calc(17 * var(--u));
  height: calc(19 * var(--u));
  max-width: none;
  scale: -1 1;
}

.consult__staff {
  left: calc(6 * var(--u));
  top: calc(439 * var(--u));
  width: calc(445 * var(--u));
  height: calc(297 * var(--u));
  max-width: none;
  object-fit: cover;
}

@media (min-width: 768px) {
  .consult__stage {
    max-width: var(--container);
    margin-inline: auto;
    aspect-ratio: 1000 / 800;
  }

  .consult__stage .ab__canvas {
    --u: calc(100cqw / 1000);
  }

  .consult__bubble { font-size: calc(33 * var(--u)); }
  .consult__bubble--1 { left: calc(236 * var(--u)); top: calc(40 * var(--u)); width: calc(170.2 * var(--u)); height: calc(109.4 * var(--u)); --tx: calc(-2 * var(--u)); --ty: calc(-10.7 * var(--u)); }
  .consult__bubble--2 { left: calc(414 * var(--u)); top: calc(79 * var(--u)); width: calc(349.5 * var(--u)); height: calc(121.5 * var(--u)); --tx: calc(-9.5 * var(--u)); --ty: calc(-4.7 * var(--u)); }

  .consult__band-blue,
  .consult__band-light {
    height: calc(165 * var(--u));
  }

  .consult__band-blue { top: calc(337.15 * var(--u)); }
  .consult__band-light { top: calc(339.35 * var(--u)); }

  .consult__label { left: calc(153.4 * var(--u)); top: calc(253.6 * var(--u)); width: calc(300 * var(--u)); height: calc(64.5 * var(--u)); font-size: calc(41.067 * var(--u)); }

  .consult__title > span { top: calc(338.6 * var(--u)); }
  .consult__title-a { left: calc(294.5 * var(--u)) !important; top: calc(332.54 * var(--u)) !important; font-size: calc(71.28 * var(--u)); }
  .consult__title-b { left: calc(648.5 * var(--u)) !important; top: calc(337.67 * var(--u)) !important; font-size: calc(58.08 * var(--u)); }

  .consult__laurel { top: calc(553.8 * var(--u)); width: calc(62.6 * var(--u)); height: calc(167 * var(--u)); }
  .consult__laurel--l { left: 0; }
  .consult__laurel--r { left: calc(413.3 * var(--u)); }

  .consult__stars { left: calc(185 * var(--u)); top: calc(526 * var(--u)); width: calc(105.7 * var(--u)); }
  .consult__stars img { width: calc(28.9 * var(--u)); height: calc(27.7 * var(--u)); }
  .consult__stars img:nth-child(2) { translate: 0 calc(-6 * var(--u)); }

  .consult__record { left: calc(238 * var(--u)); top: calc(642.5 * var(--u)); font-size: calc(38.971 * var(--u)); }

  .consult__circle { left: calc(531 * var(--u)); top: calc(451 * var(--u)); width: calc(202.5 * var(--u)); height: calc(202.5 * var(--u)); padding-bottom: calc(40 * var(--u)); font-size: calc(27 * var(--u)); }
  .consult__spark { left: calc(531 * var(--u)); top: calc(458.8 * var(--u)); width: calc(25.7 * var(--u)); height: calc(28.2 * var(--u)); }
  .consult__staff { left: calc(385.8 * var(--u)); top: calc(365 * var(--u)); width: calc(750.7 * var(--u)); height: calc(500.5 * var(--u)); }
}

.sec-head--gold {
  --accent: var(--tertiary-500);
  --accent-text: var(--tertiary-700);
}

.sec-head__sub em small {
  font-size: 0.846em;
}

/* --- Voices (Figma: Frame 38 お客様の声) --------------------------------- */
.sec-voice {
  padding: 32px 0;
  background: var(--grey-1);
}

.voice__carousel {
  margin-top: 32px;
}

.voice__track {
  display: flex;
  gap: var(--space-400);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}

.voice__track::-webkit-scrollbar {
  display: none;
}

.voice {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  width: 280px;
  padding: var(--space-600);
  border-radius: var(--radius-400);
  background: var(--white);
  scroll-snap-align: start;
}

.voice__who {
  display: flex;
  align-items: center;
  gap: var(--space-300);
}

.voice__avatar {
  position: relative;
  flex: none;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
}

.voice__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.voice__avatar--01 img { left: -10%; top: -1.24%; width: 120%; height: 120%; }
.voice__avatar--03 img { left: -23.72%; top: -12.08%; width: 144.11%; height: 144.11%; }
.voice__avatar--02 img,
.voice__avatar--05 img { object-position: bottom; }

.voice__name {
  display: grid;
  font-weight: 700;
}

.voice__name b {
  margin-bottom: -4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.voice__name span {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.voice__title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.voice__rate {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.voice__rate img {
  width: 24px;
  height: 24px;
}

.voice__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.voice__bars {
  display: flex;
  gap: var(--space-200);
  max-width: calc(342px);
  margin: 32px auto 0;
  padding-inline: 0;
}

.voice__bars button {
  flex: 1 1 0;
  height: 4px;
  background: var(--white);
  transition: background-color 0.3s;
}

.voice__bars button[aria-current="true"] {
  background: var(--tertiary-500);
}

@media (min-width: 768px) {
  .sec-voice {
    padding: 48px 0;
  }

  .voice__carousel {
    max-width: var(--container);
    margin-inline: auto;
    overflow: hidden;
  }

  .voice__track {
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .voice__bars {
    max-width: none;
  }
}

@media (min-width: 768px) and (max-width: 1047px) {
  .voice__carousel {
    margin-inline: var(--gutter);
  }
}

/* --- Items (Figma: Frame 53 / Frame 52 こんなものも売れます) ------------- */
.sec-items {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-top: 33px;
  background: var(--white);
}

.sec-items::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 1px;
  left: 50%;
  width: 435px;
  height: 239px;
  translate: -50% 0;
  background:
    linear-gradient(var(--grey-1), var(--grey-1)) center top / 395px 146px no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 50%, var(--grey-1) 99.5%, transparent 100%) center 24px / 435px 215px no-repeat;
}

.items__head {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.items__head .sec-head__badge {
  height: 39px;
  margin-bottom: 0;
}

.items__title {
  font-size: 44px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.items__title small { font-size: 0.909em; letter-spacing: 0.08em; }
.items__title .t8 { letter-spacing: 0.08em; }
.items__title .t19 { letter-spacing: 0.19em; }

.items__lead {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.item {
  display: grid;
  gap: 4px;
  text-align: center;
}

.item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-200);
}

.item__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.items__note {
  margin-top: 25px;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.7;
  text-align: center;
}

.items__more {
  --u: calc(100cqw / 600);
  max-width: 600px;
  margin: 32px auto 0;
  aspect-ratio: 600 / 219.3;
  overflow: hidden;
}

.items__more .ab__canvas {
  --u: calc(100cqw / 600);
}

.items__man { left: 0; top: calc(19.2 * var(--u)); width: calc(155.4 * var(--u)); height: calc(200 * var(--u)); max-width: none; }
.items__woman { left: calc(454.4 * var(--u)); top: calc(35.1 * var(--u)); width: calc(146.2 * var(--u)); height: calc(184.7 * var(--u)); max-width: none; }
.items__spark-l { left: calc(403.5 * var(--u)); top: calc(44.1 * var(--u)); width: calc(35.1 * var(--u)); height: calc(35.4 * var(--u)); max-width: none; }
.items__spark-s { left: calc(431.6 * var(--u)); top: calc(70.6 * var(--u)); width: calc(19.3 * var(--u)); height: calc(19.5 * var(--u)); max-width: none; }
.items__spark-s2 { left: calc(101.8 * var(--u)); top: calc(12.7 * var(--u)); width: calc(19.3 * var(--u)); height: calc(19.5 * var(--u)); max-width: none; }

.items__circle {
  left: calc(143.9 * var(--u));
  top: 0;
  display: grid;
  place-items: center;
  width: calc(107 * var(--u));
  height: calc(107 * var(--u));
  padding-bottom: calc(10 * var(--u));
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary-500);
  font-size: calc(24.56 * var(--u));
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.024em;
  white-space: nowrap;
}

.items__circle small { font-size: 0.857em; letter-spacing: -0.04em; }

.items__consult {
  left: calc(300.4 * var(--u));
  top: calc(120.4 * var(--u));
  translate: -50% -50%;
  font-size: calc(42.1 * var(--u));
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
}

.items__consult > span {
  display: block;
  width: fit-content;
  margin-inline: auto;
  border-bottom: calc(1.75 * var(--u)) solid var(--black);
}

.items__consult > span:first-child {
  padding-left: calc(12 * var(--u));
}

.items__consult small { font-size: 0.6667em; letter-spacing: 0.06em; }
.items__consult .m { font-size: 0.8333em; letter-spacing: 0.04em; }
.items__consult .t5 { letter-spacing: 0.05em; }
.items__consult .t9 { letter-spacing: 0.09em; }

@media (min-width: 768px) {
  .sec-items {
    padding-top: 40px;
  }

  .sec-items::before {
    top: -49.79px;
    width: 1588px;
    height: 250px;
    background: url("../img/items-bg-pc.svg") center / 100% 100% no-repeat;
  }

  .items__title br { display: none; }

  .items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22.857px;
    margin-top: 40px;
  }

  .item { gap: 5.714px; }
  .item img { border-radius: 11.429px; }
  .item__name { font-size: 25.714px; }

  .items__note {
    margin-top: 32px;
    font-size: 14px;
  }

  .items__more {
    margin-top: 40px;
  }
}

/* --- 汎用: 傍点（.emph-dots 内の各文字の上に点） -------------------------- */
.emph-dots {
  position: relative;
}

.emph-dots::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.12em;
  height: 7px;
  background: radial-gradient(circle at 3.5px 3.5px, var(--primary-500) 3.5px, transparent 3.7px) calc(0.5em - 3.5px) 0 / calc(1em + var(--ls, 0px)) 7px repeat-x;
}

/* --- Steps (Figma: Frame 12 かんたん4step) ------------------------------- */
.sec-steps {
  padding: 32px 0;
}

.steps__head {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 16px 0 24px;
  text-align: center;
}

.steps__head .sec-head__badge {
  margin: 0;
  font-size: 18px;
}

.steps__head .sec-head__badge .num {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.steps__head .sec-head__badge .num .ex {
  font-family: var(--font-jp);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.steps__head .sec-head__badge .num b {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.13em;
}

.steps__copy {
  display: grid;
  justify-items: center;
  font-weight: 900;
  white-space: nowrap;
}

.steps__copy-a {
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.07em;
}

.steps__copy-a .l { font-size: 1.1667em; }
.steps__copy-a .emph-dots { --ls: 0.07em; }

.steps__copy-b {
  display: grid;
  place-items: center;
  width: 187px;
  height: 52px;
  margin-top: 0;
  margin-bottom: 4.76px; /* Figma: 文字枠が帯より下に少しはみ出している分 */
  background: var(--attention);
  color: var(--white);
  padding-bottom: 0.05em;
  font-size: 41.455px;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.steps__free {
  display: flex;
  justify-content: center;
  gap: 4px;
}

/* Figma: 丸（PC 133.5 / SP 111.25）の中に、ラベル・¥0・マーカーを固定位置で配置（em = 丸の文字サイズ基準） */
.steps__free li {
  --fs: 14px;
  position: relative;
  width: 111.25px;
  height: 111.25px;
  border-radius: 50%;
  background: var(--primary-100);
  font-size: var(--fs);
}

.steps__free-label {
  position: absolute;
  top: 1.6774em;
  left: 0;
  right: 0;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
}

.steps__free-label .t-9 { letter-spacing: -0.09em; }

.steps__free-yen {
  position: absolute;
  top: 2.281em;
  left: 50%;
  display: block;
  width: 4.562em;
  text-align: center;
  translate: -50% 0;
  background: linear-gradient(var(--highlight), var(--highlight)) 0 2.817em / 100% 1.3034em no-repeat;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.steps__free-yen {
  --stroke-w: 2px;
}

.steps__free-yen .y,
.steps__free-yen .z {
  background: var(--grad-fv);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.steps__free-yen .y { font-size: 2.1724em; }

@media (min-width: 768px) {
  .steps__free-yen { --stroke-w: 2.4px; }
}
.steps__free-yen .z { font-size: 3.5844em; }

.steps {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

.step {
  display: grid;
  grid-template-areas: "head" "img" "text";
  gap: 24px;
}

.step__head {
  grid-area: head;
  display: grid;
  gap: 4px;
  text-align: center;
}

.step__no {
  padding: 4px 16px 7px;
  background: var(--primary-500);
  color: var(--white);
  font-family: var(--font-num);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
}

.step__no b {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.step__title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.step__title small { font-size: 0.9286em; }

.step__img {
  grid-area: img;
  width: 100%;
  max-width: 342px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-400);
}

.step__text {
  grid-area: text;
  padding: var(--space-300);
  border-radius: var(--radius-200);
  background: var(--grey-1);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.step__text strong {
  color: var(--attention);
  font-weight: 700;
}

@media (min-width: 768px) {
  .sec-steps {
    padding: 48px 0;
  }

  .steps__copy-a { font-size: 24px; }

  .steps__free {
    gap: 4.5px;
  }

  .steps__free li {
    --fs: 16.8px;
    width: 133.5px;
    height: 133.5px;
  }

  .steps {
    margin-top: 32px;
  }

  .step {
    grid-template-columns: minmax(0, 1fr) 342px;
    grid-template-areas: "head img" "text img";
    align-content: center;
    column-gap: 24px;
    row-gap: 24px;
  }

  .step__head { align-self: end; }

  /* Figmaと同じ位置で改行されるよう左右余白を2px詰める（1行33文字が収まる幅） */
  .step__text {
    align-self: start;
    padding-inline: 10px;
  }
}

/* --- Mottainai (Figma: Frame 56 / Frame 53「もったいない」) --------------- */
.sec-mottainai {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 32.5px 0 31px;
  background: linear-gradient(var(--secondary-100), var(--white) 99.97%);
}

.mottainai__inner {
  position: relative;
}

.mottainai__ring {
  --u: calc(100cqw / 500);
  width: 100%;
  max-width: 342px;
  margin-inline: auto;
  aspect-ratio: 1;
}

.mottainai__ring .ab__canvas {
  --u: calc(100cqw / 500);
}

.mottainai__ring img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.mottainai__ring-title {
  left: calc(245.6 * var(--u));
  top: calc(187.5 * var(--u));
  translate: -50% 0;
  color: var(--secondary-700);
  font-size: calc(42.4 * var(--u));
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.mottainai__ring-title .t-4 { letter-spacing: -0.04em; }
.mottainai__ring-title .t-1 { letter-spacing: -0.01em; }
.mottainai__ring-title .t2 { letter-spacing: 0.015em; }

.mottainai__ring-sub {
  left: calc(245.6 * var(--u));
  top: calc(266.45 * var(--u));
  translate: -50% 0;
  color: var(--secondary-700);
  font-size: calc(20.47 * var(--u));
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-align: center;
  white-space: nowrap;
}

.mottainai__photo {
  position: absolute;
  z-index: -1;
  max-width: none;
  height: auto;
}

.mottainai__photo--1 {
  left: -48px;
  top: 351.3px;
  width: 250px;
}

.mottainai__photo--2 {
  left: 166px;
  top: 968.3px;
  width: 232px;
  scale: 1 -1; /* Figmaで上下反転して配置されている画像 */
}

.mottainai__glow {
  position: absolute;
  z-index: -1;
  left: 174px;
  top: 657.3px;
  width: 208px;
  height: 208px;
  max-width: none;
}

.mottainai__body {
  --glow: 0 0 4.8px var(--white), 0 0 12px var(--white), 0 0 12px var(--white), 0 0 12px var(--white);
  padding-inline: 0;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.mottainai__quote {
  margin-top: 139.35px;
  padding-left: 22px;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-shadow: var(--glow);
}

.mottainai__p {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-shadow: var(--glow);
}

.mottainai__p + .mottainai__p {
  margin-top: 32px;
}

.mottainai__lead {
  margin-top: 24px;
  color: var(--secondary-700);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-shadow: var(--glow);
}

.mottainai__lead small { font-size: 0.857em; letter-spacing: 0.08em; }
.mottainai__lead .t6 { letter-spacing: 0.06em; }
.mottainai__lead .t14 { letter-spacing: 0.14em; }
.mottainai__lead .t12 { letter-spacing: 0.12em; }
.mottainai__lead .t10 { letter-spacing: 0.1em; }
.mottainai__lead .t-2 { letter-spacing: -0.02em; }
.mottainai__lead .t2 { letter-spacing: 0.02em; }
.mottainai__lead .t4 { letter-spacing: 0.04em; }
.mottainai__lead .t5 { letter-spacing: 0.05em; }
.mottainai__lead .t13 { letter-spacing: 0.13em; }

.mottainai__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-150);
  width: 327px;
  max-width: 100%;
  height: 60px;
  margin: 59px auto 0;
  padding: 12px 24px 16px;
  border: 2px solid var(--primary-500);
  border-radius: var(--radius-full);
  background: var(--white);
  box-shadow: 0 6px 0 var(--primary-700);
  color: var(--primary-500);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  transition: translate 0.2s, box-shadow 0.2s;
}

.mottainai__btn:hover {
  translate: 0 3px;
  box-shadow: 0 3px 0 var(--primary-700);
}

.mottainai__btn img {
  width: 24px;
  height: 24px;
}

@media (max-width: 767px) {
  .mottainai__body br.pc { display: none; }

  /* SPはFigmaどおり3行（改行位置は<br>で固定） */
  .mottainai__lead { white-space: nowrap; }
}

@media (min-width: 768px) {
  .sec-mottainai {
    padding: 40.16px 0 40px;
  }

  .mottainai__ring {
    max-width: 500px;
  }

  .mottainai__photo--1 { left: -140px; top: 440.84px; width: 500px; }
  .mottainai__photo--2 { left: 676px; top: 674.84px; width: 464px; }
  .mottainai__glow { left: -22px; top: 649.3px; }

  .mottainai__body {
    text-align: center;
  }

  .mottainai__body br.sp { display: none; }

  .mottainai__quote {
    margin-top: 41px;
    padding-left: 0;
    font-size: 26.4px;
  }

  .mottainai__p { margin-top: 32px; }
  .mottainai__p + .mottainai__p { margin-top: 32px; }

  .mottainai__lead {
    margin-top: 32px;
    font-size: 33.6px;
  }

  .mottainai__btn {
    width: auto;
    display: inline-flex;
    margin-top: 79px;
  }

  .mottainai__btn-wrap {
    text-align: center;
  }
}

/* --- FAQ (Figma: Frame 44 よくある質問) ---------------------------------- */
.sec-faq {
  padding: 32px 0;
}

.sec-head__sub .pre {
  font-size: 18px;
  font-weight: 500;
}

.faq {
  display: grid;
  gap: var(--space-200);
  max-width: 800px;
  margin: 24px auto 0;
}

@media (min-width: 768px) {
  .faq { margin-top: 32px; }
}

.faq__item {
  border: 2px solid var(--gray-2);
  border-radius: var(--radius-400);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--space-400);
  padding: 14px; /* Figmaの内側2px線の分を差し引いた16px */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::before {
  content: "Q.";
  color: var(--primary-500);
}

.faq__q::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  margin: 3px 0 0 auto;
  background: url("../img/icon-chevron-down.svg") center / contain no-repeat;
  transition: rotate 0.3s;
}

.faq__item[open] .faq__q::after {
  rotate: 180deg;
}

.faq__q span {
  flex: 1;
}

.faq__a {
  display: flex;
  gap: var(--space-400);
  margin-top: -6px;
  padding: 0 14px 14px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.faq__a::before {
  content: "A.";
  color: var(--secondary-500);
  font-weight: 700;
}

@media (min-width: 768px) {
  .sec-faq {
    padding: 48px 0;
  }

  .faq__q {
    align-items: center;
  }

  .faq__q::after {
    margin-top: 0;
  }
}

/* --- Staff message (Figma: Frame 58 / Frame 29) -------------------------- */
.sec-staff {
  position: relative;
  overflow: hidden;
  padding: 75.5px 0 47.5px;
}

.staff__en {
  position: absolute;
  top: -31.5px;
  left: 50%;
  translate: -50% 0;
  color: var(--secondary-100);
  font-family: var(--font-num);
  font-size: 52px;
  font-weight: 600;
  line-height: 1.8;
  white-space: nowrap;
  pointer-events: none;
}

.staff__grid {
  position: relative;
  display: grid;
  gap: 86.5px;
}

.staff__lead {
  position: relative;
}

.staff__title {
  position: relative;
  z-index: 1;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

.staff__title > span { display: block; }
.staff__title > span:nth-child(1) { line-height: 1.4; }
.staff__title > span:nth-child(2) { line-height: 1.5; }
.staff__title > span:nth-child(3) { line-height: 1.6; }
.staff__title small { font-size: 0.8889em; letter-spacing: 0.124em; }
.staff__title small.s { font-size: 0.8611em; letter-spacing: 0.128em; }
.staff__title .t17 { letter-spacing: 0.17em; }
.staff__title .t11 { letter-spacing: 0.11em; }
.staff__title .t6 { letter-spacing: 0.06em; }

.staff__wave {
  position: absolute;
  left: 0;
  top: 90px;
  width: 374px;
  max-width: none;
}

.staff__card {
  display: grid;
  gap: 18px;
}

.staff__profile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.staff__who {
  display: grid;
  justify-items: start;
}

.staff__badge {
  padding: 0 12px 2px;
  border-radius: var(--radius-full);
  background: var(--secondary-500);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.staff__name {
  margin-top: 5px;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.staff__roman {
  margin-top: -5px;
  padding-left: 2px;
  font-family: var(--font-num);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.staff__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.staff__message {
  padding: var(--space-400);
  border-radius: var(--radius-200);
  background: var(--grey-1);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

/* Figma: 行ごとに字間を調整して310px幅に収めている（改行位置も固定） */
.staff__message .ln { display: block; white-space: nowrap; }
.staff__message .t-11 { letter-spacing: -0.11em; }
.staff__message .t-2 { letter-spacing: -0.02em; }
.staff__message .t-1 { letter-spacing: -0.01em; }
.staff__message .t2 { letter-spacing: 0.02em; }
.staff__message .t3 { letter-spacing: 0.03em; }
.staff__message .t5 { letter-spacing: 0.05em; }
.staff__message .t6 { letter-spacing: 0.06em; }
.staff__message .t7 { letter-spacing: 0.07em; }
.staff__message .t10 { letter-spacing: 0.1em; }
.staff__message .t14 { letter-spacing: 0.14em; }
.staff__message .t15 { letter-spacing: 0.15em; }

@media (min-width: 768px) {
  .sec-staff {
    min-height: 573px;
    padding: 179.1px 0 0;
  }

  .staff__en {
    top: -83px;
    left: max(var(--gutter), calc(50% - 501px));
    translate: none;
    font-size: 131.113px;
  }

  .staff__grid {
    grid-template-columns: 1fr 342px;
    gap: 40px;
    align-items: start;
  }

  .staff__lead {
    padding-bottom: 0;
  }

  .staff__title {
    font-size: 54px;
  }

  .staff__wave {
    top: 132.6px;
    width: 561px;
  }

  .staff__card {
    margin-top: -99px; /* Figma: カード上端 80.1px */
    gap: 18px;
  }

  .staff__profile {
    position: relative;
    height: 160px;
    align-items: flex-start;
  }

  .staff__who {
    padding-top: 51px;
  }

  .staff__photo {
    position: absolute;
    right: -2px;
    top: 0;
  }
}

@media (min-width: 768px) and (max-width: 1047px) {
  .staff__title { font-size: 40px; }
  .staff__wave { width: 420px; }
}

/* --- Contact form (Figma: Frame 25 出張買取のお申込み) ------------------- */
.sec-contact {
  padding: 32px 0;
  background: var(--primary-500);
  color: var(--white);
}

.contact__head {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px 0 24px;
  text-align: center;
}

.contact__title {
  font-size: 44px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.14em;
}

.contact__lead {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.contact__card {
  display: grid;
  gap: var(--space-600);
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-800) var(--space-600);
  border-radius: var(--radius-400);
  background: var(--white);
  color: var(--black);
}

.contact__card > * {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.contact__fields {
  display: grid;
  gap: var(--space-400);
}

.field {
  display: grid;
  gap: var(--space-200);
}

.field__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-050);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.field__req {
  color: var(--attention);
  font-weight: 500;
}

.field__input {
  width: 100%;
  height: 50px;
  padding: 0 var(--space-400);
  border: 2px solid var(--gray-2);
  border-radius: var(--radius-200);
  background: var(--white);
  color: var(--black);
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: border-color 0.2s;
}

.field__input::placeholder {
  color: var(--black);
  opacity: 0.3;
}

.field__input:focus {
  border-color: var(--primary-500);
  outline: none;
}

.field__input[aria-invalid="true"] {
  border-color: var(--attention);
}

textarea.field__input {
  height: 159.6px;
  padding: var(--space-400);
  line-height: 1.8;
  resize: vertical;
}

.field__error {
  color: var(--attention);
  font-size: 14px;
  line-height: 1.7;
}

.contact__note {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: center;
}

.contact__privacy {
  display: grid;
  gap: var(--space-200);
  max-height: 200px;
  overflow-y: auto;
  padding: var(--space-400);
  border-radius: var(--radius-400);
  background: var(--grey-1);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.contact__privacy h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
}

.contact__privacy h3:first-child {
  color: var(--secondary-500);
}

.contact__privacy h4 {
  font-size: 14px;
  font-weight: 700;
}

.contact__privacy ul {
  padding-left: 21px;
  list-style: disc;
}

.contact__agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.contact__agree input {
  appearance: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--gray-2);
  border-radius: var(--radius-100);
  background: var(--white) center / 14px no-repeat;
  cursor: pointer;
}

.contact__agree input:checked {
  border-color: var(--primary-500);
  background-color: var(--primary-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3L12 3.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact__submit {
  display: block;
  width: 100%;
  max-width: 270px;
  height: 52px;
  padding: 12px 24px 16px;
  border: 2px solid var(--primary-500);
  border-radius: var(--radius-full);
  background: var(--primary-500);
  box-shadow: 0 6px 0 var(--primary-700);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  transition: translate 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.contact__submit:hover:not(:disabled) {
  translate: 0 3px;
  box-shadow: 0 3px 0 var(--primary-700);
}

.contact__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.contact__status {
  font-size: 14px;
  text-align: center;
}

.contact__status:empty {
  display: none;
}

.contact__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .contact__submit { max-width: none; }
}

@media (min-width: 768px) {
  .sec-contact {
    padding: 48px 0;
  }

  .contact__title br,
  .contact__lead br {
    display: none;
  }
}

/* --- Figmaは行の高さを整数pxに丸める（18px×1.8=32.4→32px など）。
       複数行の本文は同じ丸めにして、ブロックの高さをFigmaに合わせる ------------ */
.step__text,
.faq__q,
.faq__a,
.mottainai__p,
.mottainai__lead { line-height: round(nearest, 1.8em, 1px); }

.mottainai__quote { line-height: round(nearest, 1.6em, 1px); }

/* Figma: 見出しの小見出しは傍点の上端から2px下に文字枠（高さ47px） */
.sec-head__sub {
  padding-top: 2px;
  line-height: 47px;
}

.sec-head__sub > span { line-height: 18px; }
.sec-head__sub em { line-height: 47px; }
.sec-head__sub em small { line-height: 1; }

.voice__title { line-height: round(nearest, 1.6em, 1px); }
.voice__text,
.voice__name b { line-height: round(nearest, 1.8em, 1px); }
.voice__name span,
.voice__rate span { line-height: round(nearest, 1.7em, 1px); }
.items__title { line-height: round(nearest, 1.3em, 1px); }
.items__lead,
.item__name { line-height: round(nearest, 1.8em, 1px); }
.items__title small { line-height: 1; }
.mottainai__lead small { line-height: 1; }
.point__row:not(.point__row--us) .point__text { line-height: round(nearest, 1.4em, 1px); }
@media (max-width: 767px) {
  .point__img { aspect-ratio: 342 / 230; }
  /* Figma SP: 弊社の行は89px（文字の行の高さの丸め分を下余白で調整） */
  .point__row--us .point__text { padding-bottom: 13.4px; }
}
.staff__message { line-height: round(nearest, 1.8em, 1px); }
@media (max-width: 767px) {
  .points__lead { align-items: flex-start; } /* Figma SP: 文字は枠の上端から */
}
@media (max-width: 767px) {
  /* Figma SP: 1行目は行の高さ40.8px（先頭に27pxの空白）でマーカーは上から8〜39px、2行目は行間1.8 */
  .points__diff .hl {
    padding: 0;
    line-height: 40.8px;
    background: linear-gradient(transparent 19.6%, var(--highlight) 19.6%, var(--highlight) 95.6%, transparent 95.6%);
  }
  .points__diff .s.t10 { line-height: 1.8; }
  .points__diff { padding-bottom: 3.3px; } /* Figma SP: 波線は文字枠の上端から105px */
}
.point__row--us .point__text { justify-content: center; } /* Figma: 弊社側の文章はセル中央 */