@charset "utf-8";
/* ==========================================================================
   行列のできるお家相談所 LP
   デザイン基準幅 : 1400px（アセットのネイティブ幅）
   実装           : セクション背景はフルブリード / インナー幅は --inner-max（既定 1000px）
   スケール       : --s = 1デザインpxあたりの実px。全ての寸法は calc(N * var(--s))。
                    --inner-max を 1400px にすればデザイン原寸 1:1 で表示されます。
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after {
  box-sizing: border-box
}

html, body, div, span, h1, h2, h3, p, a, img, ul, ol, li, dl, dt, dd, section, header, footer, nav, em {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline
}

section, header, footer, nav {
  display: block
}

ul, ol {
  list-style: none
}

img {
  display: block;
  max-width: 100%;
  height: auto
}

a {
  text-decoration: none;
  color: inherit
}

html {
  -webkit-text-size-adjust: 100%
}

body {
  container-type: inline-size;
  background: #fff;
  color: #333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: 500;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt"1;
  font-kerning: normal;
}

/* ---------- スケール基準 ---------- */
html[data-verify="1"] .lp {
  --inner-max: 1400px
}

.lp {
  --inner-max: 1100px;
  /* ← ここだけ変えれば全体が拡縮します */
  --s: calc(min(100cqw, var(--inner-max)) / 1400);
  --inner: calc(1400 * var(--s));
  --green: #04b63a;
  --dgreen: #018964;
  --ctatop: #d9f7ff;
  /* CTA 背景グラデーションの上端 */
  --mint: #effef4;
  --cream: #fef9d5;
  --yellow: #ffe210;
  overflow-x: hidden;
}

.inner {
  position: relative;
  width: var(--inner);
  margin-inline: auto;
  height: 100%;
}

/* 各セクションは高さ固定・子要素はデザイン座標で絶対配置（ドリフト皆無） */
.lp section, .lp header, .lp footer {
  position: relative;
  overflow: hidden
}

/* 詳細度は (0,1,0) に揃える。SP 側で同じ強さの後続ルールとして解除するため。 */
/* picture は display:contents なので、中の img も「.inner の直接の子」として扱う */
.inner>*, .inner>picture>*, .hdr__in>* {
  position: absolute
}

.hdr__in {
  position: relative;
  width: var(--inner);
  margin-inline: auto;
  height: 100%
}

/* 全幅の帯（街並みイラスト）: セクション下端にフルブリードでリピート */
.citystrip {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(58 * var(--s));
  background: url(../assets/cta_bg_01.webp) bottom center/auto 100% repeat-x;
}

/* セクション境界の切り欠き：下のセクションの上端中央に、上のセクション色の下向き三角。
   デザイン実測 幅 340 / 深さ 51（中心 x700）。色は「上のセクションの下端色」を入れる。 */
.tainou::before,
.merit::before,
.kaiketu::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: calc(170 * var(--s)) solid transparent;
  border-right: calc(170 * var(--s)) solid transparent;
  border-top: calc(51 * var(--s)) solid;
}

.tainou::before {
  border-top-color: #fff
}

/* 上＝お悩み（下端は白） */
.merit::before {
  border-top-color: var(--mint)
}

/* 上＝滞納タイミング */
.kaiketu::before {
  border-top-color: var(--cream)
}

/* 上＝03 高い専門性 */

.btn {
  display: block;
  transition: transform .18s ease, filter .18s ease
}

.btn:hover {
  transform: translateY(calc(2 * var(--s)));
  filter: brightness(1.04)
}

/* ==========================================================================
   HEADER  (design y 0-55 / h 56)
   ========================================================================== */
.hdr {
  height: calc(75 * var(--s));
  background: #fff;
  z-index: 20
}

.hdr__logo {
  left: calc(39 * var(--s));
  top: calc(5 * var(--s));
  width: calc(259 * var(--s));
}

.hdr__nav {
  left: calc(588 * var(--s));
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(38 * var(--s));
  font-size: calc(18 * var(--s));
  font-weight: 700;
  color: #222;
  white-space: nowrap;
}

.hdr__nav a {
  transition: color .2s
}

.hdr__nav a:hover {
  color: #0a845f
}

.hdr__nav .is-cur {
  color: #0a845f
}

.hdr__btn {
  left: calc(1141 * var(--s));
  top: calc(7 * var(--s));
  width: calc(263 * var(--s))
}

/* ==========================================================================
   MAIN VISUAL (design y 56-806 / h 751)
   左 : #e9fff0 + 街並み帯 / 右 : x781 から グリーン→ダークグリーン
   ========================================================================== */
.mv {
  height: calc(751 * var(--s))
}

.mv__in {
  position: relative;
  width: var(--inner);
  margin-inline: auto;
  height: 100%
}

.mv__in>*, .mv__in>picture>*, .mv__right>* {
  position: absolute;
  z-index: 1
}

/* .mv__right は display:contents なので子も直接指定する */
.mv__in::before {
  /* 左パネル（左方向へフルブリード） */
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: calc(619 * var(--s));
  background: #e9fff0 url(../assets/mv_bg_left.webp) right bottom/auto calc(57 * var(--s)) repeat-x;
}

.mv__in::after {
  /* 右パネル（右方向へフルブリード） */
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(781 * var(--s));
  right: -100vw;
  background: linear-gradient(#04b63a 0 calc(597 * var(--s)), #018964 calc(597 * var(--s)) 100%);
}

.mv__right {
  display: contents
}

/* PC: 箱を作らず、子はデザイン座標のまま */
.mv__h2 {
  left: calc(57 * var(--s));
  top: calc(11 * var(--s));
  width: calc(644 * var(--s))
}

.mv__lead {
  left: calc(82 * var(--s));
  top: calc(444 * var(--s));
  font-size: calc(18 * var(--s));
  line-height: calc(29.6 * var(--s));
  font-weight: 500;
  color: #2a2a2a;
  white-space: nowrap;
}

.mv__btn {
  left: calc(80 * var(--s));
  top: calc(544 * var(--s));
  width: calc(620 * var(--s))
}

.mv__ri {
  left: calc(781 * var(--s));
  top: calc(38 * var(--s));
  width: calc(619 * var(--s))
}

.mv__rc {
  left: calc(800 * var(--s));
  top: calc(633 * var(--s));
  width: calc(582 * var(--s))
}

/* ==========================================================================
   CTA 共通
   ========================================================================== */
/* 背景は淡い水色 → 白のグラデーション（デザイン実測。セクション高に対する % で
   指定しているので PC の固定高でも SP の可変高でも同じ見え方になる） */
.cta {
  background: linear-gradient(var(--ctatop), #fff 64%)
}

.cta--1 {
  background: linear-gradient(var(--ctatop), #fff 84%)
}


/* SP でのみ使う（下部の SP ブロック参照） */
.cta__h2 {
  left: 0;
  top: calc(75 * var(--s));
  width: calc(1400 * var(--s))
}

.cta__h3 {
  left: 0;
  top: calc(377 * var(--s));
  width: calc(1400 * var(--s))
}

.cta__sub {
  left: calc(297 * var(--s));
  top: calc(435 * var(--s));
  width: calc(803 * var(--s))
}

.cta__sub li {
  width: 100%
}

.cta--1 {
  height: calc(738 * var(--s))
}

.cta--1 .citystrip {
  top: calc(681 * var(--s))
}

.cta--1 .cta__sub {
  left: calc(299 * var(--s));
  top: calc(435 * var(--s))
}

.cta--2 {
  height: calc(641 * var(--s))
}

.cta--2 .cta__h2 {
  top: calc(70 * var(--s))
}

.cta--2 .cta__sub {
  top: calc(330 * var(--s))
}

.cta--2 .citystrip {
  top: calc(580 * var(--s))
}

.cta--3 {
  height: calc(636 * var(--s))
}

.cta--3 .cta__h2 {
  top: calc(67 * var(--s))
}

.cta--3 .cta__sub {
  top: calc(327 * var(--s))
}

.cta--3 .citystrip {
  top: calc(577 * var(--s))
}

.cta--5 {
  height: calc(791 * var(--s))
}

.cta--5 .citystrip {
  top: calc(732 * var(--s))
}

.cta--5 .cta__h2 {
  top: calc(68 * var(--s))
}

.cta--5 .cta__sub {
  top: calc(470 * var(--s))
}

.cta__lead {
  left: 0;
  top: calc(345 * var(--s));
  width: calc(1400 * var(--s));
  text-align: center;
  color: #333;
  font-weight: 500;
  font-size: calc(19 * var(--s));
  line-height: calc(30.5 * var(--s));
}

/* ==========================================================================
   こんなお悩みありませんか？ (design y 1545-3163 / h 1619)
   ========================================================================== */
.nayami {
  height: calc(1619 * var(--s));
  background: #eef4ea url(../assets/nayami_bg.webp) center top/100% 100% no-repeat;
}

.nayami__h2 {
  left: calc(123 * var(--s));
  top: calc(106 * var(--s));
  width: calc(1153 * var(--s))
}

.nayami__card {
  left: calc(201.5 * var(--s));
  top: calc(335 * var(--s));
  width: calc(997 * var(--s));
  height: calc(957 * var(--s));
  background: url(../assets/nayami_checklist_fukidashi.webp) center top/100% 100% no-repeat;
}

.nayami__card .nc {
  position: absolute;
  left: calc(73 * var(--s));
  width: calc(850 * var(--s))
}

.nayami__card .nc7 {
  left: calc(75 * var(--s));
  width: calc(766 * var(--s))
}

.nc1 {
  top: calc(73 * var(--s))
}

.nc2 {
  top: calc(192 * var(--s))
}

.nc3 {
  top: calc(316 * var(--s))
}

.nc4 {
  top: calc(440 * var(--s))
}

.nc5 {
  top: calc(571 * var(--s))
}

.nc6 {
  top: calc(695 * var(--s))
}

.nc7 {
  top: calc(819 * var(--s))
}

.nayami__comment {
  left: calc(317 * var(--s));
  top: calc(1334 * var(--s));
  width: calc(756 * var(--s))
}

/* ==========================================================================
   滞納1〜2ヶ月の「今」が一番有利 (design y 3164-4428 / h 1265)
   ※この見出しだけ画像アセットが無いため HTML/CSS で再現
   ========================================================================== */
.tainou {
  height: calc(1265 * var(--s));
  background: var(--mint)
}

.sparkle {
  left: calc(645 * var(--s));
  top: calc(107 * var(--s));
  width: calc(110 * var(--s));
  height: calc(46 * var(--s));
}

.sparkle::before, .sparkle::after, .sparkle>i {
  content: ""
}

.sparkle::before, .sparkle::after {
  position: absolute;
  top: calc(4 * var(--s));
  width: calc(2.5 * var(--s));
  height: calc(32 * var(--s));
  background: #1a1a1a;
  border-radius: calc(2 * var(--s));
}

/* デザインは「＼ ｜ ／」。左は反時計回り、右は時計回りに倒す */
.sparkle::before {
  left: calc(6 * var(--s));
  transform: rotate(-28deg)
}

.sparkle::after {
  right: calc(6 * var(--s));
  transform: rotate(28deg)
}

.sparkle {
  background:
    linear-gradient(#1a1a1a, #1a1a1a) center calc(2 * var(--s))/calc(2.5 * var(--s)) calc(30 * var(--s)) no-repeat;
}

.tainou__h2 {
  left: 0;
  top: calc(163 * var(--s));
  width: calc(1400 * var(--s));
  text-align: center;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: #111;
}

.tainou__h2a {
  display: block;
  font-size: calc(47 * var(--s));
  line-height: calc(58 * var(--s));
  letter-spacing: 0
}

.tw {
  display: inline-block;
  text-align: center;
  font-style: normal;
  letter-spacing: 0
}

.tw-w {
  width: calc(46 * var(--s))
}

/* 〜 */
.tw-k {
  width: calc(34 * var(--s))
}

/* ヶ */
/* 「」だけは inline-block にすると Zen Maru Gothic の「が描画されない（Chromium）ため、
   inline のまま負マージンで詰める。palt 適用時の実アドバンス 33.6px を 20px 相当に。 */
.tw-b {
  display: inline;
  width: auto;
  margin: 0 calc(-6.8 * var(--s))
}

/* 「」 */
.wave {
  display: block;
  height: calc(9 * var(--s));
  width: calc(443 * var(--s));
  margin: calc(9 * var(--s)) auto 0;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 4.5 Q2 0.5 4 4.5 T8 4.5 T12 4.5 T16 4.5' fill='none' stroke='%23222' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x center/auto calc(9 * var(--s));
}

.tainou__h2b {
  display: block;
  margin-top: calc(25 * var(--s));
  padding-left: calc(30 * var(--s));
  font-size: calc(56.5 * var(--s));
  line-height: calc(64 * var(--s));
  font-weight: 700;
  letter-spacing: 0;
}

.tainou__h2b .mk {
  background-image: linear-gradient(#ffe500, #ffe500);
  background-repeat: no-repeat;
  background-size: 100% calc(70 * var(--s));
  background-position: 0 calc(9 * var(--s));
  padding: 0 calc(5 * var(--s));
}

.tainou__h2b .rd {
  color: #e0322f
}

.tainou__lead {
  left: 0;
  top: calc(360 * var(--s));
  width: calc(1400 * var(--s));
  text-align: center;
  font-size: calc(20 * var(--s));
  line-height: calc(40 * var(--s));
  font-weight: 700;
  color: #111;
}

/* --- 4段カード --- */
.tcard {
  background: #fff;
  border-radius: calc(14 * var(--s));
  border: calc(6 * var(--s)) solid #7a7a7a;
  top: calc(538 * var(--s));
  width: calc(273 * var(--s));
  height: calc(290 * var(--s));
}

.tcard--now {
  top: calc(508 * var(--s));
  left: calc(104 * var(--s));
  width: calc(298 * var(--s));
  height: calc(300 * var(--s));
  border-color: #dd3032;
  background: #fef8f8;
}

.tcard--2 {
  left: calc(422 * var(--s))
}

.tcard--3 {
  left: calc(714 * var(--s))
}

.tcard--4 {
  left: calc(1006 * var(--s))
}

.tcard__tab {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-35 * var(--s));
  width: calc(182 * var(--s));
}

.tcard--now .tcard__tab {
  top: calc(-35 * var(--s))
}

.tcard__h3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(45 * var(--s))
}

.tcard--now .tcard__h3 {
  top: calc(45 * var(--s));
  width: calc(188 * var(--s))
}

.tcard--2 .tcard__h3 {
  width: calc(146 * var(--s))
}

.tcard--3 .tcard__h3 {
  width: calc(198 * var(--s))
}

.tcard--4 .tcard__h3 {
  width: calc(147 * var(--s))
}

.tcard p {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(200 * var(--s));
  text-align: center;
  font-size: calc(15.6 * var(--s));
  line-height: calc(30 * var(--s));
  font-weight: 500;
  color: #555;
}

.tcard--2 p, .tcard--3 p, .tcard--4 p {
  top: calc(167 * var(--s))
}

.tcard--now p {
  top: calc(169 * var(--s))
}

.tainou__comment {
  left: calc(100 * var(--s));
  top: calc(888 * var(--s));
  width: calc(1200 * var(--s))
}

/* ==========================================================================
   メリット3枚 (design y 4429-5249 / h 821)
   ========================================================================== */
.merit {
  height: calc(821 * var(--s));
  background: var(--yellow)
}

.merit__h2 {
  left: 0;
  top: calc(109 * var(--s));
  width: calc(1400 * var(--s))
}

.mcard, .kcard {
  top: calc(331 * var(--s));
  width: calc(380 * var(--s));
  height: calc(381 * var(--s));
  background: #fff;
  border: calc(6 * var(--s)) solid #0b8b53;
  border-radius: calc(12 * var(--s));
}

.mcard--1, .kcard--1 {
  left: calc(103 * var(--s))
}

.mcard--2, .kcard--2 {
  left: calc(514 * var(--s))
}

.mcard--3, .kcard--3 {
  left: calc(917 * var(--s))
}

.mcard__no {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-45 * var(--s));
  width: calc(80 * var(--s));
  z-index: 2
}

.mcard__img {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(376 * var(--s));
  border-radius: calc(10 * var(--s)) calc(10 * var(--s)) 0 0
}

.mcard__h3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(190 * var(--s))
}

.mcard--1 .mcard__h3 {
  width: calc(147 * var(--s))
}

.mcard--2 .mcard__h3 {
  width: calc(286 * var(--s))
}

.mcard--3 .mcard__h3 {
  width: calc(155 * var(--s))
}

.mcard p, .kcard p {
  position: absolute;
  left: calc(37 * var(--s));
  right: calc(22 * var(--s));
  top: calc(233 * var(--s));
  font-size: calc(16.6 * var(--s));
  line-height: calc(30.3 * var(--s));
  font-weight: 500;
  color: #555;
}

/* ==========================================================================
   01 高く売れる (design y 5250-7027 / h 1778)
   ========================================================================== */
.merit01 {
  height: calc(1770 * var(--s));
  background: var(--cream)
}

.m01__no {
  left: calc(604 * var(--s));
  top: calc(83 * var(--s));
  width: calc(191 * var(--s))
}

.m01__h2 {
  left: 0;
  top: calc(283 * var(--s));
  width: calc(1400 * var(--s))
}

.lead {}

.m01__lead, .m02__lead, .m03__lead, .rt__lead {
  left: 0;
  width: calc(1400 * var(--s));
  text-align: center;
  font-size: calc(19 * var(--s));
  line-height: calc(30.4 * var(--s));
  font-weight: 500;
  color: #111;
}

.rt__lead {
  font-size: calc(19.6 * var(--s))
}

.m01__lead {
  top: calc(383 * var(--s))
}

.gcard {
  left: calc(100 * var(--s));
  width: calc(1201 * var(--s));
  background: #fff;
  border: calc(4 * var(--s)) solid #018964;
  border-radius: calc(16 * var(--s));
}

.gcard__hd {
  position: absolute;
  left: calc(-4 * var(--s));
  right: calc(-4 * var(--s));
  top: calc(-4 * var(--s));
  height: calc(155 * var(--s));
  background: #018964;
  border-radius: calc(16 * var(--s)) calc(16 * var(--s)) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m01__card {
  top: calc(521 * var(--s));
  height: calc(1126 * var(--s))
}

.m01__card .gcard__hd img {
  width: calc(1008 * var(--s))
}

.m01__ill1 {
  position: absolute;
  left: calc(55 * var(--s));
  top: calc(199 * var(--s));
  width: calc(1079 * var(--s))
}

.m01__legend {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(744 * var(--s));
  text-align: center;
  font-size: calc(19 * var(--s));
  line-height: calc(24 * var(--s));
  font-weight: 700;
  color: #333;
}

.m01__legend .lg {
  display: inline-block;
  width: calc(19 * var(--s));
  height: calc(19 * var(--s));
  margin-right: calc(8 * var(--s));
  vertical-align: calc(-2 * var(--s))
}

.m01__legend .lg2 {
  margin-left: calc(26 * var(--s))
}

.lg1 {
  background: #e0242c
}

.lg2 {
  background: #f07474
}

.m01__note {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(786 * var(--s));
  text-align: center;
  font-size: calc(12 * var(--s));
  line-height: calc(18 * var(--s));
  color: #777;
}

.m01__ill2 {
  position: absolute;
  left: calc(59 * var(--s));
  top: calc(843 * var(--s));
  width: calc(1075 * var(--s))
}

/* ==========================================================================
   02 早く買い手が見つかる (design y 7665-8993 / h 1329)
   ========================================================================== */
.merit02 {
  height: calc(1329 * var(--s));
  background: var(--mint)
}

.m02__no {
  left: calc(499 * var(--s));
  top: calc(83 * var(--s));
  width: calc(401 * var(--s))
}

.m02__h2 {
  left: 0;
  top: calc(284 * var(--s));
  width: calc(1400 * var(--s))
}

.m02__lead {
  top: calc(384 * var(--s))
}

.m02__card {
  top: calc(520 * var(--s));
  height: calc(698 * var(--s));
  width: calc(1200 * var(--s))
}

.m02__card .gcard__hd {
  height: calc(157 * var(--s))
}

.m02__card .gcard__hd img {
  width: calc(892 * var(--s))
}

.m02__ill1 {
  position: absolute;
  left: calc(58 * var(--s));
  top: calc(190 * var(--s));
  width: calc(505 * var(--s))
}

.m02__ill2 {
  position: absolute;
  left: calc(629 * var(--s));
  top: calc(203 * var(--s));
  width: calc(505 * var(--s))
}

/* 注釈：SP と同じく「カードのすぐ下・左端揃え」。カードは top 520 + height 698
   ＝ 下端 1218 なので、そこから 12 空けて置く（セクション高 1329 に収まる）。 */
.m02__note {
  left: calc(100 * var(--s));
  top: calc(1230 * var(--s));
  width: calc(1201 * var(--s));
  font-size: calc(14 * var(--s));
  line-height: 1.6;
  color: #666;
}

/* SP 用に描き起こされたアセットは <picture> + <source media> で出し分ける。
   picture 自体は display:contents で箱を作らないので、中の <img> が親から見て
   直接の子として扱われ、既存の img 向けルールがそのまま効きます。 */
picture {
  display: contents
}

/* picture が display:contents だと <source> まで grid/flex の子として数えられ、
   空のセルが生まれてしまうので明示的に消す（.m03__grid が1カラムになる不具合の対策） */
picture>source {
  display: none
}

/* 2枚が横並びの PC では不要。SP で縦積みになったときだけ流れを示す矢印を出す */
.m02__arrow {
  display: none
}

/* ==========================================================================
   03 高い専門性 (design y 8994-10422 / h 1429)
   ========================================================================== */
.merit03 {
  height: calc(1429 * var(--s));
  background: var(--cream)
}

.m03__no {
  left: calc(595 * var(--s));
  top: calc(85 * var(--s));
  width: calc(209 * var(--s))
}

.m03__h2 {
  left: 0;
  top: calc(297 * var(--s));
  width: calc(1400 * var(--s))
}

.m03__lead {
  top: calc(451 * var(--s))
}

.m03__card {
  top: calc(628 * var(--s));
  height: calc(699 * var(--s));
  width: calc(1200 * var(--s))
}

.m03__card .gcard__hd--tall {
  height: calc(163 * var(--s));
  overflow: visible
}

.m03__card .gcard__hd--tall img {
  width: calc(921 * var(--s));
  position: relative;
  top: calc(-11 * var(--s))
}

.m03__grid {
  position: absolute;
  left: calc(60 * var(--s));
  top: calc(215 * var(--s));
  width: calc(1081 * var(--s));
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(2 * var(--s));
  row-gap: calc(1 * var(--s));
}

.m03__grid img {
  width: 100%
}

/* ==========================================================================
   解決する未来 (design y 10423-11277 / h 855)
   ========================================================================== */
.kaiketu {
  height: calc(855 * var(--s));
  background: var(--yellow)
}

.kaiketu__h2 {
  left: 0;
  top: calc(109 * var(--s));
  width: calc(1400 * var(--s))
}

.kcard {
  top: calc(331 * var(--s));
  height: calc(414 * var(--s))
}

.kcard .mcard__img {
  width: calc(376 * var(--s))
}

.kcard__h3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(189 * var(--s))
}

.kcard--1 .kcard__h3 {
  width: calc(230 * var(--s))
}

.kcard--2 .kcard__h3 {
  width: calc(303 * var(--s))
}

.kcard--3 .kcard__h3 {
  width: calc(317 * var(--s))
}

.kcard p {
  top: calc(271 * var(--s))
}

/* ==========================================================================
   一社査定 vs オークション (design y 11914-12895 / h 982)
   ========================================================================== */
.hikaku {
  height: calc(982 * var(--s));
  background: var(--cream)
}

.hikaku__h2 {
  left: 0;
  top: calc(111 * var(--s));
  width: calc(1400 * var(--s))
}

.hcard {
  top: calc(398 * var(--s));
  width: calc(583 * var(--s));
  height: calc(456 * var(--s));
  background: #fff;
  border-radius: calc(14 * var(--s));
  border: calc(3 * var(--s)) solid #7e7e7e;
}

.hcard--l {
  left: calc(102 * var(--s))
}

.hcard--r {
  left: calc(715 * var(--s));
  border-color: #dd3032
}

.hcard__tab {
  position: absolute;
  left: calc(37 * var(--s));
  top: calc(8 * var(--s));
  width: calc(505 * var(--s))
}

.hcard__i {
  position: absolute;
  left: calc(37 * var(--s))
}

.hcard .i1, .hcard .i2, .hcard .i3 {
  width: calc(506 * var(--s))
}

.hcard--l .i4 {
  width: calc(369 * var(--s))
}

.hcard--r .i4 {
  width: calc(347 * var(--s))
}

.hcard .i1 {
  top: calc(137 * var(--s))
}

.hcard .i2 {
  top: calc(216 * var(--s))
}

.hcard .i3 {
  top: calc(294 * var(--s))
}

.hcard .i4 {
  top: calc(373 * var(--s))
}

.hikaku__arrow {
  left: calc(682 * var(--s));
  top: calc(585 * var(--s));
  width: 0;
  height: 0;
  border-top: calc(40 * var(--s)) solid transparent;
  border-bottom: calc(40 * var(--s)) solid transparent;
  border-left: calc(48 * var(--s)) solid #7e7d7e;
}

/* ==========================================================================
   リアルタイム入札 (design y 12896-14198 / h 1303)
   ========================================================================== */
.realtime {
  height: calc(1303 * var(--s));
  background: var(--mint)
}

.rt__h2 {
  left: 0;
  top: calc(113 * var(--s));
  width: calc(1400 * var(--s))
}

.rt__lead {
  top: calc(369 * var(--s))
}

.rt__card {
  left: calc(96 * var(--s));
  top: calc(513 * var(--s));
  width: calc(1207 * var(--s));
  height: calc(666 * var(--s));
  background: #fff;
  border: calc(3 * var(--s)) solid #06b83f;
  border-radius: calc(16 * var(--s));
  overflow: hidden;
}

.rt__hd {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(156 * var(--s));
  background: #06b83f;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rt__hd img {
  width: calc(779 * var(--s))
}

.rt__ill {
  position: absolute;
  left: calc(129 * var(--s));
  top: calc(217 * var(--s));
  width: calc(952 * var(--s))
}

/* ==========================================================================
   サービスの流れ (design y 14199-15573 / h 1375)
   ========================================================================== */
.service {
  height: calc(1375 * var(--s));
  background: #fff
}

.sv__h2 {
  left: 0;
  top: calc(113 * var(--s));
  width: calc(1400 * var(--s))
}

.sv__line {
  left: calc(247 * var(--s));
  top: calc(340 * var(--s));
  width: calc(5 * var(--s));
  height: calc(880 * var(--s));
  background: #41c561;
}

.sv__step {
  left: calc(199 * var(--s));
  width: calc(1100 * var(--s));
  height: calc(150 * var(--s))
}

.sv__step img {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100 * var(--s));
  z-index: 2
}

.sv__step h3 {
  position: absolute;
  left: calc(132 * var(--s));
  top: calc(39 * var(--s));
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: calc(35 * var(--s));
  line-height: calc(40 * var(--s));
  font-weight: 700;
  color: #06b02b;
}

.sv__step p {
  position: absolute;
  left: calc(132 * var(--s));
  top: calc(115 * var(--s));
  font-size: calc(19 * var(--s));
  line-height: calc(26 * var(--s));
  font-weight: 500;
  color: #5a5a5a;
}

.sv__step--1 {
  top: calc(291 * var(--s))
}

.sv__step--2 {
  top: calc(476 * var(--s))
}

.sv__step--3 {
  top: calc(663 * var(--s))
}

.sv__step--4 {
  top: calc(889 * var(--s))
}

.sv__step--5 {
  top: calc(1116 * var(--s))
}

/* ==========================================================================
   専任コンシェルジュ + CTA4 (design y 15574-17420 / h 1847)
   ========================================================================== */
/* 上部はベタ、カード下からフェード（CTA4 を含むため CTA と同じ配色） */
.support {
  height: calc(1844 * var(--s));
  background: linear-gradient(var(--ctatop), var(--ctatop) 68%, #fff 88%);
}

/* セクション高 1844 − 帯高 58 = 1786。これより大きいと overflow:hidden で消えます */
.support .citystrip {
  top: calc(1786 * var(--s))
}

.sp__h2 {
  left: 0;
  top: calc(110 * var(--s));
  width: calc(1400 * var(--s))
}

.sp__lead {
  left: 0;
  top: calc(368 * var(--s));
  width: calc(1400 * var(--s));
  text-align: center;
  color: #333;
  font-size: calc(19 * var(--s));
  line-height: calc(30 * var(--s));
  font-weight: 500;
}

.sp__card {
  left: calc(100 * var(--s));
  top: calc(544 * var(--s));
  width: calc(1200 * var(--s));
  height: calc(659 * var(--s));
  background: #fff;
  border-radius: calc(16 * var(--s));
  overflow: hidden;
}

.sp__hd {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(157 * var(--s));
  background: #018964;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp__hd img {
  width: calc(734 * var(--s))
}

.sp__ill {
  position: absolute;
  left: calc(31 * var(--s));
  top: calc(302 * var(--s));
  width: calc(384 * var(--s));
  z-index: 999;
}

.sp__box {
  position: absolute;
  left: calc(328 * var(--s));
  top: calc(225 * var(--s));
  width: calc(812 * var(--s));
  height: calc(382 * var(--s));
  background: #ffe210;
  border-radius: calc(14 * var(--s));
}

.sp__box .spc {
  position: absolute;
  left: calc(63 * var(--s));
  width: calc(686 * var(--s))
}

.sp__box .c1 {
  top: calc(43 * var(--s));
  width: calc(687 * var(--s))
}

.sp__box .c2 {
  top: calc(121 * var(--s))
}

.sp__box .c3 {
  top: calc(199 * var(--s))
}

.sp__box .c4 {
  top: calc(277 * var(--s))
}

.cta__h2--4 {
  top: calc(1277 * var(--s))
}

.cta__sub--4 {
  top: calc(1536 * var(--s))
}

/* ==========================================================================
   よくある質問 (design y 17421-19357 / h 1937)
   ========================================================================== */
/* このセクションだけは高さ固定にできません。アコーディオンは初期状態で全て閉じており、
   開くと高さが伸びるためです（高さ固定＋overflow:hidden だと開いた分が切れます）。
   デザイン座標と同じ余白を padding / margin で再現しています。 */
.faq {
  height: auto;
  padding: calc(119 * var(--s)) 0 calc(104 * var(--s));
  background: var(--mint)
}

.faq .inner>* {
  position: static
}

.faq__h2 {
  width: calc(1400 * var(--s));
  margin-inline: auto
}

.faq__list {
  width: calc(998 * var(--s));
  margin: calc(61 * var(--s)) auto 0
}

.faq__item {
  margin-bottom: calc(20 * var(--s))
}

.faq__item dt {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(118 * var(--s));
  background: #fff;
  cursor: pointer;
  padding-left: calc(50 * var(--s));
  padding-right: calc(80 * var(--s));
}

.faq__q {
  width: calc(36 * var(--s));
  flex: none;
  margin-right: calc(27 * var(--s))
}

.faq__qt {
  font-size: calc(21 * var(--s));
  line-height: 1.5;
  font-weight: 700;
  color: #1c1c1c
}

.faq__ar {
  position: absolute;
  right: calc(48 * var(--s));
  top: 50%;
  width: calc(20 * var(--s));
  height: calc(20 * var(--s));
  margin-top: calc(-4 * var(--s));
  border-right: calc(3 * var(--s)) solid #1a3ecb;
  border-bottom: calc(3 * var(--s)) solid #1a3ecb;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .25s ease;
}

.faq__item.is-open .faq__ar {
  transform: translateY(calc(2 * var(--s))) rotate(225deg)
}

.faq__item dd {
  display: flex;
  align-items: center;
  height: calc(118 * var(--s));
  background: #ffe9e9;
  padding-left: calc(53 * var(--s));
  padding-right: calc(60 * var(--s));
  overflow: hidden;
  transition: height .25s ease;
}

.faq__item:not(.is-open) dd {
  height: 0
}

.faq__a {
  width: calc(30 * var(--s));
  flex: none;
  margin-right: calc(27 * var(--s))
}

.faq__at {
  font-size: calc(19 * var(--s));
  line-height: 1.7;
  font-weight: 500;
  color: #1c1c1c
}

/* ==========================================================================
   FOOTER (design y 20149-20384 / h 236)
   ========================================================================== */
.ft {
  height: calc(236 * var(--s));
  background: #fff
}

.ft__nav {
  left: 0;
  top: calc(80 * var(--s));
  width: calc(1400 * var(--s));
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(15 * var(--s));
  font-weight: 700;
  color: #333;
}

.ft__nav li+li {
  border-left: calc(1 * var(--s)) solid #c9d6cf;
  margin-left: calc(14 * var(--s));
  padding-left: calc(15 * var(--s))
}

.ft__nav a {
  transition: opacity .2s
}

.ft__nav a:hover {
  opacity: .65;
  color: #11845e;
}

.ft__cr {
  left: 0;
  top: calc(141 * var(--s));
  width: calc(1400 * var(--s));
  text-align: center;
  font-size: calc(12 * var(--s));
  color: #777;
}

/* ==========================================================================
   SP 追従CTA（既定は非表示。900px 以下でのみ有効）
   ========================================================================== */
.spcta {
  display: none
}

/* ==========================================================================
   タブレット〜PC 中間域：インナーは常に画面幅いっぱい（比率は cqw ベースで自動維持）
   ========================================================================== */
@media (max-width:1000px) {
  .lp {
    --inner-max: 100cqw
  }
}

/* ==========================================================================
   SP レイアウト（900px 以下）
   ---------------------------------------------------------------------------
   PC は 1400px デザインの等倍縮小だが、900px を切ると本文が 11px 相当まで落ちる。
   ここから下は「375px を基準にした 1カラムの別レイアウト」に切り替える。

   --m    : 375px 基準のスケール単位。--s と同じく「長さ」（375px 幅で 1px、
            上限 1.28px ＝ 480px 相当）。以降 calc(N * var(--m)) の N は
            「375px 幅での実px」。※数値と長さを min() で混ぜると値ごと無効に
            なるので、必ず長さ同士で書くこと。
   --sp-w : コンテンツ列の幅（左右 14px のガター、最大 480px）
   セクションは高さ auto ＋通常フロー。カード内の画像はカード幅に対する % で
   指定してあるので、--m の上限に関係なくデザイン比率が保たれる。
   ========================================================================== */
@media (max-width:900px) {

  /* ---------- 基本 ---------- */
  .lp {
    --m: min(calc(100cqw / 375), 1.28px);
    --sp-w: min(calc(100cqw - 28px), 480px);
    /* 全幅で置く要素（SP 版見出しなど）の幅。列幅＋左右ガター分で頭打ちにする */
    --sp-full: min(100cqw, 508px);
    --inner-max: 100cqw;
  }

  .lp section, .lp header, .lp footer {
    height: auto
  }

  .lp .inner, .lp .hdr__in, .lp .mv__in {
    position: relative;
    width: var(--sp-w);
    height: auto;
    margin-inline: auto;
  }

  /* デザイン座標での絶対配置を解除して通常フローへ。position:relative にして
     おくことで、カード内の絶対配置要素（タブ・番号バッジ等）の基準がカード自身になる。
     詳細度は (0,1,0)＝PC 側と同じ。以降の個別指定が後勝ちで上書きできる。 */
  .inner>*, .inner>picture>*, .hdr__in>*, .mv__in>*, .mv__in>picture>* {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    height: auto;
    transform: none;
  }

  .btn:hover {
    transform: none
  }

  /* ---------- 見出し ----------
     SP 版アセット（sp_*.webp / 750px = 375@2x）があるものは <picture> の
     <source media="(max-width:900px)"> で差し替わるので、画面幅いっぱいに置くだけでよい
     （左右の余白はアセット側に含まれている）。

     SP 版が無い 3 点（cta_h3_01 / service_h2 / faq_h2）だけ、PC アセットから
     文字部分を切り出して拡大している。数値は _verify/inkrect.py の実測値。
     → これらの SP 版アセットが用意できたら、下の「SP 版があるもの」側へ移すだけで済みます。 */

  /* --- SP 版アセットがあるもの：画面幅いっぱいに置く --- */
  .nayami__h2, .merit__h2, .kaiketu__h2, .m01__h2, .m02__h2, .m03__h2,
  .hikaku__h2, .rt__h2, .sp__h2, .cta__h2 {
    display: block;
    width: var(--sp-full);
    max-width: none;
    margin-left: calc(50% - var(--sp-full) / 2);
    margin-right: 0;
    overflow: visible;
  }

  .nayami__h2 img, .merit__h2 img, .kaiketu__h2 img, .m01__h2 img, .m02__h2 img,
  .m03__h2 img, .hikaku__h2 img, .rt__h2 img, .sp__h2 img, .cta__h2 img {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    clip-path: none;
  }

  /* --- SP 版が無いもの：PC アセットから文字部分だけ切り出して拡大 --- */
  .cta__h3, .sv__h2, .faq__h2 {
    display: block;
    overflow: hidden;
    width: 94%;
    margin-inline: auto;
  }

  .cta__h3 img, .sv__h2 img, .faq__h2 img {
    display: block;
    max-width: none;
  }

  /* cta_h3_01：1行に31文字あるので読点「なく、」の後（x562 の空白）で上下2行に割る。
     上段は ::before の背景、下段は img の切り出し。両方が同じ倍率になるよう
     上段の幅を 257/533 にしている。波線の下線は各行がそれぞれ持つ形になる。 */
  .cta__h3::before {
    content: "";
    display: block;
    width: 48.2%;
    margin: 0 auto calc(7 * var(--m));
    aspect-ratio: 257/44;
    background: url(../assets/cta_h3_01.webp) no-repeat 26.7% 0/544.7% auto;
    /* 帯 x305-562 */
  }

  .cta__h3 img {
    width: 262.7%;
    /* 帯 x562-1095 */
    margin-left: -105.4%;
  }

  /* 短い見出しは列幅より小さく */
  .sv__h2 {
    width: 64%;
  }

  .sv__h2 img {
    width: 390.0%;
    /* 文字 520-879 */
    margin-left: -144.8%;
  }

  .faq__h2 {
    width: 60%;
  }

  .faq__h2 img {
    width: 496.5%;
    /* 文字 559-841 */
    margin-left: -198.2%;
  }

  /* ---------- 街並み帯（CTA / support の下端） ---------- */
  .cta .citystrip, .support .citystrip {
    top: auto;
    bottom: 0;
    height: calc(30 * var(--m))
  }

  /* ---------- セクション境界の切り欠き（デザイン比 340:51 を 375px 基準に換算） ---------- */
  .tainou::before,
  .merit::before,
  .kaiketu::before {
    border-left-width: calc(46 * var(--m));
    border-right-width: calc(46 * var(--m));
    border-top-width: calc(14 * var(--m));
  }

  /* ==================== HEADER ==================== */
  .hdr {
    padding: calc(9 * var(--m)) 0
  }

  .hdr__in {
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .hdr__nav {
    display: none
  }

  .hdr__logo {
    width: calc(146 * var(--m))
  }

  /* 見た目は変えずタップ領域だけ 44px 相当まで広げる */
  .hdr__btn {
    width: calc(170 * var(--m));
    box-sizing: content-box;
    padding: calc(10 * var(--m)) 0;
    margin: calc(-10 * var(--m)) 0;
  }

  /* ==================== MAIN VISUAL ==================== */
  .mv {
    background: #e9fff0
  }

  .mv__in {
    padding-top: calc(14 * var(--m))
  }

  .mv__in::before, .mv__in::after {
    display: none
  }

  /* PC の左右2分割パネルを無効化 */
  .mv__h2 {
    width: 100%
  }

  .mv__lead {
    white-space: normal;
    margin-top: calc(12 * var(--m));
    font-size: calc(13 * var(--m));
    line-height: 1.85;
  }

  .mv__btn {
    display: block;
    width: 100%;
    margin-top: calc(16 * var(--m))
  }

  .mv__btn img {
    width: 100%
  }

  /* 右パネル: 画面幅いっぱいの緑ブロック。上端に街並み帯を敷いて PC の帯を踏襲 */
  .mv__right {
    display: block;
    position: relative;
    width: 100cqw;
    max-width: none;
    margin: calc(20 * var(--m)) 0 0 calc(50% - 50cqw);
    /* 上は街並み帯(30) ＋ 図版との間隔(22) */
    padding: calc(52 * var(--m)) 0 calc(26 * var(--m));
    background: linear-gradient(#04b63a, #018964);
  }

  .mv__right::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(30 * var(--m));
    background: #e9fff0 url(../assets/mv_bg_left.webp) center bottom/auto 100% repeat-x;
  }

  .mv__ri, .mv__rc {
    position: static;
    display: block;
    width: var(--sp-w);
    margin: 0 auto
  }

  .mv__rc {
    margin-top: calc(16 * var(--m))
  }

  /* ==================== CTA 共通 ==================== */
  /* PC 側の .cta--N .xxx（詳細度 0,2,0）はリセットより強いので個別に解除する */
  .cta--1 .cta__sub, .cta--2 .cta__sub, .cta--3 .cta__sub, .cta--5 .cta__sub,
  .cta--2 .cta__h2, .cta--3 .cta__h2, .cta--5 .cta__h2 {
    left: auto;
    top: auto
  }

  .cta {
    padding: calc(34 * var(--m)) 0 calc(60 * var(--m))
  }

  .cta__h3 {
    margin-top: calc(12 * var(--m))
  }

  .cta__lead {
    width: 100%;
    margin-top: calc(16 * var(--m));
    text-align: left;
    font-size: calc(13 * var(--m));
    line-height: 1.85;
  }

  .cta__sub {
    width: 100%;
    margin-top: calc(20 * var(--m))
  }

  .cta__sub img {
    width: 100%
  }

  /* ==================== こんなお悩みありませんか？ ==================== */
  .nayami {
    padding: calc(30 * var(--m)) 0 calc(34 * var(--m));
    background: #fff url(../assets/nayami_bg.webp) center top/100% auto no-repeat;
  }

  /* 幅は上の「SP 版アセットがあるもの」で全幅指定済み */

  .nayami__card {
    position: relative;
    margin-top: calc(20 * var(--m));
    padding: calc(18 * var(--m)) calc(15 * var(--m)) calc(20 * var(--m));
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: calc(14 * var(--m));
  }

  .nayami__card::after {
    /* 吹き出しの尻尾 */
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-9 * var(--m));
    width: calc(18 * var(--m));
    height: calc(18 * var(--m));
    background: #fff;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    transform: translateX(-50%) rotate(45deg);
  }

  .nayami__card .nc {
    position: static;
    width: 100%;
    margin-bottom: calc(12 * var(--m))
  }

  .nayami__card .nc7 {
    width: 90.1%;
    margin-bottom: 0
  }

  /* 766/850 */
  .nayami__comment {
    width: 100%;
    margin-top: calc(30 * var(--m))
  }

  /* ==================== 滞納1〜2ヶ月の「今」 ==================== */
  .tainou {
    padding: calc(34 * var(--m)) 0 calc(32 * var(--m))
  }

  .sparkle {
    position: relative;
    width: calc(62 * var(--m));
    height: calc(26 * var(--m));
    margin: 0 auto;
    background-size: calc(2 * var(--m)) calc(19 * var(--m));
    background-position: center calc(1 * var(--m));
  }

  .sparkle::before, .sparkle::after {
    top: calc(2 * var(--m));
    width: calc(2 * var(--m));
    height: calc(18 * var(--m))
  }

  .sparkle::before {
    left: calc(3 * var(--m))
  }

  .sparkle::after {
    right: calc(3 * var(--m))
  }

  .tainou__h2 {
    width: 100%;
    margin-top: calc(2 * var(--m))
  }

  .tainou__h2a {
    font-size: calc(19 * var(--m));
    line-height: 1.35
  }

  .tw-w {
    width: calc(23 * var(--m))
  }

  .tw-k {
    width: calc(18 * var(--m))
  }

  .tw-b {
    margin: 0 calc(-2.75 * var(--m))
  }

  /* font-size 19px 時のアドバンス 13.6px → 8px 相当 */
  .wave {
    width: 56%;
    height: calc(5 * var(--m));
    background-size: auto calc(5 * var(--m));
    margin-top: calc(6 * var(--m))
  }

  .tainou__h2b {
    margin-top: calc(10 * var(--m));
    padding-left: 0;
    font-size: calc(21 * var(--m));
    line-height: 1.35;
    letter-spacing: -.01em;
  }

  .tainou__h2b .mk {
    background-size: 100% calc(21 * var(--m));
    background-position: 0 calc(4 * var(--m));
    padding: 0 calc(2 * var(--m))
  }

  .tainou__lead {
    width: 100%;
    margin-top: calc(16 * var(--m));
    text-align: left;
    font-size: calc(13 * var(--m));
    line-height: 1.85;
  }

  .tcard, .tcard--now {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: calc(40 * var(--m));
    border-width: calc(2 * var(--m));
    border-radius: calc(10 * var(--m));
    padding: calc(26 * var(--m)) calc(14 * var(--m)) calc(18 * var(--m));
  }

  .tcard__tab, .tcard--now .tcard__tab {
    position: absolute;
    left: 50%;
    top: calc(-17 * var(--m));
    transform: translateX(-50%);
    width: calc(112 * var(--m));
    z-index: 2;
  }

  .tcard__h3 {
    position: static;
    transform: none;
    display: block;
    margin: 0 auto
  }

  .tcard--now .tcard__h3 {
    width: 48%
  }

  .tcard--4 {
    margin-bottom: 20px;
  }

  /* 188/298 */
  .tcard--2 .tcard__h3 {
    width: 45%
  }

  /* 146/273 */
  .tcard--3 .tcard__h3 {
    width: 57%
  }

  /* 198/273 */
  .tcard--4 .tcard__h3 {
    width: 45%
  }

  /* 147/273 */
  .tcard p, .tcard--now p, .tcard--2 p, .tcard--3 p, .tcard--4 p {
    position: static;
    margin-top: calc(12 * var(--m));
    text-align: center;
    font-size: calc(13 * var(--m));
    line-height: 1.8;
  }

  /* 最初の改行（句読点の後）だけ残し、文の途中で入っている改行は無効化する */
  .tcard p br:not(:first-of-type) {
    display: none
  }

  .tainou__comment {
    width: 100%;
    margin-top: calc(28 * var(--m))
  }

  /* ==================== メリット3枚 / 解決する未来（共通カード） ==================== */
  .merit, .kaiketu {
    padding: calc(32 * var(--m)) 0 calc(32 * var(--m))
  }

  .mcard, .kcard {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: calc(46 * var(--m));
    border-width: calc(2 * var(--m));
    border-radius: calc(10 * var(--m));
    padding-bottom: calc(18 * var(--m));
  }

  .mcard__no {
    position: absolute;
    left: 50%;
    top: calc(-22 * var(--m));
    transform: translateX(-50%);
    width: calc(52 * var(--m));
    z-index: 2;
  }

  .mcard__img, .kcard .mcard__img {
    position: static;
    width: 100%;
    border-radius: calc(8 * var(--m)) calc(8 * var(--m)) 0 0;
  }

  .mcard__h3, .kcard__h3 {
    position: static;
    transform: none;
    display: block;
    margin: calc(16 * var(--m)) auto 0
  }

  .mcard--1 .mcard__h3 {
    width: 35.7%
  }

  /* 147/380 */
  .mcard--2 .mcard__h3 {
    width: 67.3%
  }

  /* 286/380 */
  .mcard--3 .mcard__h3 {
    width: 36.8%
  }

  /* 155/380 */
  .kcard--1 .kcard__h3 {
    width: 46.5%
  }

  /* 230/380 */
  .kcard--2 .kcard__h3 {
    width: 60.7%
  }

  /* 303/380 */
  .kcard--3 .kcard__h3 {
    width: 65.4%
  }

  /* 317/380 */
  .mcard p, .kcard p {
    position: static;
    margin: calc(12 * var(--m)) 0 0;
    padding: 0 calc(16 * var(--m));
    font-size: calc(13 * var(--m));
    line-height: 1.8;
  }

  .mcard p br, .kcard p br {
    display: none
  }

  /* ==================== 緑枠カード（01/02/03 共通） ==================== */
  .gcard {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: calc(26 * var(--m));
    border-width: calc(3 * var(--m));
    border-radius: calc(12 * var(--m));
    padding-bottom: calc(18 * var(--m));
  }

  .gcard__hd, .m02__card .gcard__hd, .m03__card .gcard__hd--tall {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: auto;
    margin: calc(-3 * var(--m)) calc(-3 * var(--m)) 0;
    padding: calc(13 * var(--m)) calc(12 * var(--m));
    border-radius: calc(10 * var(--m)) calc(10 * var(--m)) 0 0;
  }

  .gcard__hd img, .m01__card .gcard__hd img, .m02__card .gcard__hd img,
  .m03__card .gcard__hd--tall img {
    width: 100%;
    top: 0
  }
  .gcard__hd img, .m01__card .gcard__hd img{
    width: 86%;
  }

  /* merit03 の見出しは女性のイラストが入っているため、緑帯を文字の高さまで詰めて
     頭が帯の上にはみ出す形にする（PC と同じ見せ方）。
     アセット sp_merit03_h3 は 508x209 で、文字は y83 から始まる。 */
  .m03__card .gcard__hd--tall {
    height: calc(116 * var(--m));
    padding: 10px calc(12 * var(--m));
    align-items: flex-start;
    overflow: visible;
  }

  .m03__card .gcard__hd--tall img {
    margin-top: calc(-46 * var(--m));
  }

  /* はみ出した頭の逃げ */
  .m03__card {
    margin-top: calc(56 * var(--m));
  }

  /* ---- 01 高く売れる ---- */
  .merit01, .merit02, .merit03 {
    padding: calc(30 * var(--m)) 0 calc(34 * var(--m))
  }

  .m01__no {
    width: calc(140 * var(--m));
    margin-inline: auto
  }

  .m02__no {
    width: calc(255 * var(--m));
    margin-inline: auto
  }

  .m03__no {
    width: calc(152 * var(--m));
    margin-inline: auto
  }

  .m01__h2, .m02__h2, .m03__h2 {
    margin-top: calc(14 * var(--m))
  }

  .m01__lead, .m02__lead, .m03__lead, .rt__lead {
    width: 100%;
    margin-top: calc(14 * var(--m));
    text-align: left;
    font-size: calc(13 * var(--m));
    line-height: 1.85;
  }

  .m01__ill1, .m01__ill2, .m02__ill1, .m02__ill2, .rt__ill {
    position: static;
    display: block;
    width: 97%;
    margin: calc(14 * var(--m)) auto 0;
  }

  /* 縦積みになった2枚のあいだに流れを示す赤い下向き矢印（SP のみ） */
  .m02__arrow {
    display: block;
    width: 0;
    height: 0;
    margin: calc(18 * var(--m)) auto calc(2 * var(--m));
    border-left: calc(22 * var(--m)) solid transparent;
    border-right: calc(22 * var(--m)) solid transparent;
    border-top: calc(20 * var(--m)) solid #e0322f;
  }

  .m01__legend {
    position: static;
    margin-top: calc(12 * var(--m));
    padding: 0 calc(12 * var(--m));
    font-size: calc(11.5 * var(--m));
    line-height: 1.6;
  }

  .m02__note {
    margin-top: calc(8 * var(--m));
    font-size: calc(11 * var(--m));
    line-height: 1.6;
  }

  .m01__legend .lg {
    width: calc(10 * var(--m));
    height: calc(10 * var(--m));
    margin-right: calc(5 * var(--m));
    vertical-align: calc(-1 * var(--m))
  }

  .m01__legend .lg2 {
    margin-left: calc(12 * var(--m))
  }

  .m01__note {
    position: static;
    margin-top: calc(6 * var(--m));
    padding: 0 calc(12 * var(--m));
    font-size: calc(10 * var(--m));
    line-height: 1.6;
  }

  /* ---- 03 高い専門性: 2×2 → 1カラム ---- */
  .m03__grid {
    position: static;
    width: auto;
    margin-top: calc(14 * var(--m));
    padding: 0 calc(10 * var(--m));
    grid-template-columns: 1fr;
    row-gap: calc(8 * var(--m));
    column-gap: 0;
  }

  /* ==================== 一社査定 vs オークション ==================== */
  .hikaku {
    padding: calc(30 * var(--m)) 0 calc(34 * var(--m))
  }

  .hcard {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: calc(20 * var(--m));
    border-width: calc(2 * var(--m));
    border-radius: calc(10 * var(--m));
    padding: calc(14 * var(--m)) 0 calc(18 * var(--m));
  }

  .hcard__tab {
    position: static;
    display: block;
    width: 88%;
    margin: 0 auto
  }

  /* デザインどおり全項目を左揃えにする（auto で中央寄せにすると幅の狭い4項目目だけ
     インデントされて見えるため）。左位置はデザインの 37/583 = 6.3%。 */
  .hcard__i {
    position: static;
    display: block;
    margin: calc(12 * var(--m)) 0 0 6.3%
  }

  .hcard .i1, .hcard .i2, .hcard .i3 {
    width: 86.8%
  }

  /* 506/583 */
  .hcard--l .i4 {
    width: 63.3%
  }

  /* 369/583 */
  .hcard--r .i4 {
    width: 59.5%
  }

  /* 347/583 */
  .hikaku__arrow {
    display: block;
    width: 0;
    height: 0;
    margin: calc(16 * var(--m)) auto 0;
    border-left: calc(22 * var(--m)) solid transparent;
    border-right: calc(22 * var(--m)) solid transparent;
    border-top: calc(20 * var(--m)) solid #7e7d7e;
    border-bottom: 0;
  }

  /* ==================== リアルタイム入札 ==================== */
  .realtime {
    padding: calc(30 * var(--m)) 0 calc(32 * var(--m))
  }

  .rt__card {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: calc(22 * var(--m));
    border-width: calc(3 * var(--m));
    border-radius: calc(12 * var(--m));
    padding-bottom: calc(18 * var(--m));
  }

  .rt__hd {
    position: relative;
    height: auto;
    padding: calc(13 * var(--m)) calc(12 * var(--m))
  }

  .rt__hd img {
    width: 100%
  }

  /* ==================== サービスの流れ ==================== */
  .service {
    padding: calc(30 * var(--m)) 0 calc(30 * var(--m))
  }

  .sv__line {
    display: none
  }

  /* 縦線は各ステップの ::before で描画 */
  .sv__step {
    position: relative;
    width: auto;
    height: auto;
    min-height: calc(56 * var(--m));
    padding: 0 0 calc(26 * var(--m)) calc(72 * var(--m));
  }

  .sv__step--1 {
    margin-top: calc(22 * var(--m))
  }

  .sv__step--5 {
    padding-bottom: 0
  }

  .sv__step:not(.sv__step--5)::before {
    content: "";
    position: absolute;
    left: calc(26 * var(--m));
    top: calc(28 * var(--m));
    bottom: 0;
    width: calc(3 * var(--m));
    background: #41c561;
  }

  .sv__step img {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(56 * var(--m));
    z-index: 2
  }

  .sv__step h3 {
    position: static;
    font-size: calc(19 * var(--m));
    line-height: 1.4;
    margin-top: calc(6 * var(--m))
  }

  .sv__step p {
    position: static;
    margin-top: calc(4 * var(--m));
    font-size: calc(13 * var(--m));
    line-height: 1.8
  }

  /* ==================== 専任コンシェルジュ + CTA4 ==================== */
  .support {
    padding: calc(32 * var(--m)) 0 calc(60 * var(--m))
  }

  .sp__lead {
    width: 100%;
    margin-top: calc(16 * var(--m));
    text-align: left;
    font-size: calc(13 * var(--m));
    line-height: 1.85;
  }

  .sp__card {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: calc(22 * var(--m));
    border-radius: calc(12 * var(--m));
    padding-bottom: calc(18 * var(--m));
  }

  .sp__hd {
    position: relative;
    height: auto;
    padding: calc(14 * var(--m)) calc(12 * var(--m))
  }

  .sp__hd img {
    width: 100%
  }

  .sp__ill {
    position: static;
    display: block;
    width: 37%;
    margin: calc(16 * var(--m)) auto 0
  }

  .sp__box {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin: calc(-1 * var(--m)) calc(12 * var(--m)) 0;
    padding: calc(14 * var(--m)) calc(12 * var(--m));
    border-radius: calc(10 * var(--m));
  }

  .sp__box .spc, .sp__box .c1 {
    position: static;
    width: 100%;
    margin-bottom: calc(10 * var(--m))
  }

  .sp__box .c4 {
    margin-bottom: 0
  }

  .cta__h2--4 {
    margin-top: calc(38 * var(--m))
  }

  .cta__sub--4 {
    margin-top: calc(20 * var(--m))
  }

  /* ==================== よくある質問 ==================== */
  .faq {
    padding: calc(30 * var(--m)) 0 calc(34 * var(--m))
  }

  .faq__list {
    position: static;
    width: 100%;
    margin-top: calc(22 * var(--m))
  }

  .faq__item {
    margin-bottom: calc(10 * var(--m))
  }

  .faq__item dt {
    height: auto;
    min-height: calc(54 * var(--m));
    align-items: center;
    padding: calc(12 * var(--m)) calc(32 * var(--m)) calc(12 * var(--m)) calc(14 * var(--m));
    border-radius: calc(6 * var(--m));
  }

  .faq__q {
    width: calc(20 * var(--m));
    margin-right: calc(10 * var(--m))
  }

  .faq__qt {
    font-size: calc(14 * var(--m));
    line-height: 1.55
  }

  .faq__ar {
    right: calc(14 * var(--m));
    width: calc(9 * var(--m));
    height: calc(9 * var(--m));
    border-right-width: calc(2 * var(--m));
    border-bottom-width: calc(2 * var(--m));
    margin-top: calc(-2 * var(--m));
  }

  .faq__item.is-open .faq__ar {
    transform: translateY(calc(1 * var(--m))) rotate(225deg)
  }

  /* 高さ auto ではアニメーションできないので max-height で開閉する */
  .faq__item dd, .faq__item:not(.is-open) dd {
    height: auto;
    max-height: 0;
    align-items: flex-start;
    padding: 0 calc(14 * var(--m));
    border-radius: calc(6 * var(--m));
    transition: max-height .28s ease, padding .28s ease;
  }

  .faq__item.is-open dd {
    max-height: calc(400 * var(--m));
    padding-block: calc(13 * var(--m))
  }

  .faq__a {
    width: calc(19 * var(--m));
    margin-right: calc(10 * var(--m));
    margin-top: calc(2 * var(--m))
  }

  .faq__at {
    font-size: calc(13 * var(--m));
    line-height: 1.8
  }

  /* ==================== FOOTER ==================== */
  .ft {
    padding: calc(26 * var(--m)) 0 calc(112 * var(--m))
  }

  /* 下部は追従CTAの逃げ */
  .ft__nav {
    position: static;
    width: 100%;
    flex-wrap: wrap;
    font-size: calc(11 * var(--m));
    line-height: 1.6;
  }

  .ft__nav li+li {
    border-left-width: 1px;
    margin-left: calc(9 * var(--m));
    padding-left: calc(10 * var(--m))
  }

  .ft__cr {
    position: static;
    width: 100%;
    margin-top: calc(14 * var(--m));
    font-size: calc(10 * var(--m))
  }

  /* ==================== 追従CTA ==================== */
  .spcta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: calc(6 * var(--m)) 0 calc(7 * var(--m));
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 calc(-2 * var(--m)) calc(12 * var(--m)) rgba(0, 0, 0, .14);
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
  }

  .spcta.is-show {
    transform: none;
    opacity: 1;
    pointer-events: auto
  }

  .spcta__btn {
    display: block;
    width: min(calc(100cqw - 26px), 460px);
    margin: 0 auto
  }

  .spcta__btn img {
    width: 100%
  }
}

@media (max-width:900px) and (prefers-reduced-motion:reduce) {
  .spcta {
    transition: none
  }

  .faq__item dd, .faq__item:not(.is-open) dd {
    transition: none
  }
}