@charset "UTF-8";
/* ==========================================================================
   p-futon  羽毛布団リフォーム（下層①・8枚目）
   出典: Figma PC 937:2374（1440×6156）/ SP 983:2546（390×5767）
   数値・色は 2026-08-17 に複製ファイルから REST /nodes で実取得。目視推測ゼロ。

   🔒 タブレット帯は比率で組む（固定pxはPC1440専用ブロックのみ）
   設計座標（PC）: FV y-54 / worry y587 / solve y1110 / point y1733 / result y3534 / price y4418
   ========================================================================== */
.p-futon__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0;
  color: #333333;
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px);
  font-weight: 700;
  line-height: 1.448;
  text-align: center;
}

.p-futon__heading-bubble {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
}

/* FV下の補足文（実測 937:2611: 20px 500）
   🔴 監査#37: PCではFV枠の中（y392）に載せる。器 __fv-extra は SP では素通し（高さ0の素の流し） */
.p-futon__fv-extra,
.p-futon__fv-extra-canvas {
  display: contents;
}

.p-futon__fv-text {
  margin: 20px 0 0;
  padding: 0 22px;
  color: #333333;
  font-size: clamp(16px, 14.5142857143px + 0.380952381vw, 20px);
  font-weight: 500;
  line-height: 1.7;
}

/* S-34 FVの羽3つ＝PCのみ（1440キャンバスに絶対配置。SPはfv-extraが素の流しのため出さない） */
.p-futon__fv-feather {
  display: none;
}

/* ==========================================================================
   お悩み（吹き出し4つ）
   ========================================================================== */
.p-futon__worry {
  margin-top: 60px;
  padding: 0 22px;
}

.p-futon__worry-heading {
  margin: 0;
  color: #005ca7; /* 実測 937:2583: #005CA7 */
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px);
  font-weight: 700;
  line-height: 1.448;
  text-align: center;
}

/* 🔒 お悩みの吹き出し（Figma実測＝**四方に自由配置**・グリッドではない）
   SP: 983:2584 390×169 に4つを2段の互い違い ＋ **その下にイラスト**（監査#42）
   PC: 937:2584 942×281 に4つ＋中央にイラスト 358×287（937:2597）

   🔴 監査#42: 旧コメントの「SPにはイラストが無い」は**誤り**。
   Figma SP `983:2600`（PCと同じ imageRef 3aa9a9f2）が x87 y591 **217×174** で実在する。
   ステージ `983:2582` は y424〜763（h339）＝ 吹き出し(169) ＋ イラスト。 */
.p-futon__worry-stage {
  position: relative;
  z-index: 3; /* 監査#42: 後続の青帯より前面（PCと同じ扱い） */
  /* 🔴 監査#42: Figma SP の吹き出しは **x0〜390＝画面端いっぱい**（`983:2589` x0 / `983:2586` 右端390）。
     親の padding:0 22px の内側(361px)に収めると左右が食い込み、縦も aspect-ratio が
     361基準で解決されて 339 ぶんの高さが出ない。∴ ステージだけ画面幅へ戻す。 */
  width: 100vw;
  margin-top: 40px; /* 実測(SP): 見出し下端385 -> 吹き出し上端424 */
  margin-left: -22px; /* 親 .p-futon__worry の padding を打ち消す */
  aspect-ratio: 390/339; /* 実測 983:2582: 390×339（吹き出し169＋イラスト） */
}

/* 🔒 同席指摘 羽毛②（8/25 S-35）: 吹き出しはFigmaの**雲形ベクター4種**（尻尾込みの一体形状）で、
   色も #F3FBFF（減った/吹き出し）と #E1F5FF（ふくらみ/側生地）の**2色交互**。
   旧実装のCSS角丸+単色+三角尻尾は別物 → Figmaから書き出したSVG（色は焼き込み済み）を背景に敷く */
.p-futon__bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 14px;
  background: center/100% 100% no-repeat;
  color: #333333;
  font-size: 16px; /* 実測(SP) 983:2595 ほか */
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.p-futon__bubble--herutta {
  background-image: url("../img/futon/worry-hane-hetta.svg"); /* 937:2589 #F3FBFF */
}

.p-futon__bubble--fukurami {
  background-image: url("../img/futon/worry-fukurami.svg"); /* 937:2595 #E1F5FF */
}

.p-futon__bubble--yabure {
  background-image: url("../img/futon/worry-kiji.svg"); /* 937:2586 #E1F5FF */
}

.p-futon__bubble--fukidashi {
  background-image: url("../img/futon/worry-fukidashi.svg"); /* 937:2592 #F3FBFF */
}

/* SPの配置（実測 983:2584 390×169 に対する比率） */
/* 🔴 監査#42: ステージ高を 169 -> **339**（イラストを含む実測値）へ変えたため、
   top / height の % は 339 基準で取り直す（旧値は 169 基準＝2倍に伸びてしまう）。
   実測 983:2593 / 2596 / 2586 / 2589（ステージ 983:2582 は y424 起点） */
.p-futon__bubble--herutta {
  top: 0;
  left: 51.28%;
  width: 44.1%;
  height: 20.65%;
}

.p-futon__bubble--fukurami {
  top: 4.42%;
  left: 4.87%;
  width: 43.85%;
  height: 20.35%;
}

.p-futon__bubble--yabure {
  top: 24.48%;
  left: 56.15%;
  width: 43.85%;
  height: 20.65%;
}

.p-futon__bubble--fukidashi {
  top: 29.2%;
  left: 0;
  width: 43.85%;
  height: 20.65%;
}

/* イラストはPCのみ（SPデザインには存在しない） */
/* 🔴 監査#42: SPのイラスト（実測 983:2600: x87 y591 217×174 / ステージ y424 起点） */
.p-futon__worry-illust {
  position: absolute;
  top: 49.26%; /* 実測: (591-424)/339 */
  left: 22.31%; /* 実測: 87/390 */
  z-index: 3;
  display: block;
  width: 55.64%; /* 実測: 217/390 */
  height: auto;
}

/* ==========================================================================
   解決band（水色帯＋説明）
   ========================================================================== */
/* 🔒 49件「羽根イラストがない」＝実測 937:2636(右 96×114) / 937:2628(左 84×95) の装飾2点。
   セクション(1440×533)に対する比率で置く */
/* 🔴 監査#42（SP）: Figma SP も PC と同じく **イラストの下端が青帯に重なる**。
   実測 `983:2600` イラスト y591〜**765** ／ `983:2572` 青帯 y**749**〜945 ＝ 重なり **16px**。
   旧 margin-top:60px はイラスト非表示を前提にした値だった。 */
.p-futon__solve {
  position: relative;
  margin-top: -16px; /* 実測(SP): ステージ下端(=イラスト下端765) -> 帯上端749 */
}

.p-futon__feather {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.p-futon__feather--right {
  top: 22.14%;
  left: 77.36%;
  width: 6.67%;
}

.p-futon__feather--left {
  top: 87.62%;
  left: 13.4%;
  width: 5.83%;
}

/* S-36（8/25指摘③）: PCはFigma実測のpx（solve上端=帯上端y1110起点）で固定。
   %指定はsolveの実高（本文量で変わる）に依存して羽が下へ流れていた */
@media (min-width: 769px) {
  .p-futon__feather--right {
    top: 118px; /* 実測 937:2636: y1228 − 帯1110 */
    left: 77.36%; /* 1114/1440 */
    width: 6.74%; /* 97/1440 */
  }
  .p-futon__feather--left {
    top: 467px; /* 実測 937:2628: y1577 − 帯1110 */
    left: 13.4%; /* 193/1440 */
    width: 5.9%; /* 85/1440 */
  }
}
/* 🔴 2026-08-27 ユーザー指摘: SPの羽2つが「小さく・位置が上」だった。
   原因＝上の既定値がPCの比率（1440基準の 6.67% / 77.36% 等）のままで、
   SP用の上書きが無かったため 390幅にPC比率がそのまま当たっていた（実測 幅26px）。
   Figma SP実測（solve帯の上端 y749.2 を起点）:
     右の羽 983:2580 x328 y881   w52.5 → top131.8px / left84.10% / width13.46%
     左の羽 983:2576 x3   y1274.2 w40.5 → top525px   / left 0.77% / width10.38%
   ※左の羽は「羽毛布団リフォームとは？」の本文に被っていた＝y座標も実測へ是正。 */
@media (max-width: 768px) {
  .p-futon__feather--right {
    top: 131.8px;
    left: 84.1%;
    width: 13.46%;
    height: auto;
  }
  /* ⚠️ 左の羽は固定yにすると本文に被る。
     Figma実測では **羽の上端1274.2 ≒ 本文の下端1274.7／羽の下端1319.7 = セクション下端1319.7**
     ＝「本文の下・セクションの最下部」に置かれている（羽の高さ45.5ぶんの余白がある）。
     実装は390幅で本文の折返し行数がFigmaより増え、下の余白が40pxしか無いため
     bottom:0 でも羽(46px)が最終行に掛かる。∴ 羽の高さぶんの余白を確保してから下端に置く。 */
  .p-futon__feather--left {
    top: auto;
    bottom: 4px;
    left: 0.77%;
    width: 10.38%;
    height: auto;
  }
}
.p-futon__solve-band {
  position: relative;
  padding: 40px 22px;
  background: #5fcafd; /* 実測 937:2576: #5FCAFD */
  text-align: center;
}

/* 帯下の三角（実測 937:2578: Polygon 87×86） */
.p-futon__solve-band::after {
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 22px solid #5fcafd;
  border-right: 22px solid transparent;
  border-left: 22px solid transparent;
  transform: translateX(-50%);
  content: "";
  z-index: 2;
}

.p-futon__solve-title {
  margin: 0;
  color: #ffffff; /* 実測 937:2581: #FFFFFF */
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px);
  font-weight: 700;
  line-height: 1.45;
}

.p-futon__solve-body {
  padding: 50px 22px 40px;
  background: #f3fbff; /* 実測 937:2575: #F3FBFF */
  text-align: center;
}

/* 🔴 2026-08-27: SPは左下の羽(46px)を本文の下に置くため、下の余白を羽ぶん確保する。
   ⚠️ 上の shorthand より後ろに置くこと（前だと同じ詳細度で上書きされる）。 */
@media (max-width: 768px) {
  .p-futon__solve-body {
    padding-bottom: 60px;
  }
}
.p-futon__solve-heading {
  margin: 0;
  color: #005ca7; /* 実測 937:2579: #005CA7 */
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px);
  font-weight: 700;
  line-height: 1.448;
}

.p-futon__solve-text {
  margin: 24px 0 0;
  color: #333333;
  font-size: 18px; /* 実測 937:2580: 18px 500 */
  font-weight: 500;
  line-height: 1.7;
  text-align: left;
}

/* ==========================================================================
   point（4項目・写真付き）
   ========================================================================== */
.p-futon__point {
  margin-top: 90px;
  padding: 0 22px;
}

/* 🔴 監査#43: Figma SP は **写真 → 番号見出し → 本文**（`983:2610` 画像 y1510 → `983:2613` 番号 y1752）。
   実装は DOM 順（本文ブロック → 写真）がそのまま出ていた。
   `_tabD_log` #23（デラックスSP）と同じ手当て＝**マークアップは変えず SP だけ視覚順を反転**する
   （PCは「テキスト左・写真右」の横並びで DOM 順が正）。
   送りは実測: card_01 y1510 → card_02 y1967 → item_03 y2446 → card_04 y2903 ＝ 各 457/479/457 */
.p-futon__point-card {
  display: flex;
  flex-direction: column-reverse; /* 監査#43: SPのみ写真が先 */
  margin-top: 60px;
}

/* 🔴 監査#43: 02・04 の行にだけ水色帯（実測 `983:2617` / `983:2633`: x0 y+48 **390×381** #F3FBFF）。
   帯はカード上端より 48px 下から始まり、画面幅いっぱい。 */
.p-futon__point-card--band {
  position: relative;
}

.p-futon__point-card--band::before {
  position: absolute;
  top: 48px; /* 実測: card 1967 -> back 2015 */
  left: -22px; /* 親 .p-futon__point の padding を打ち消して画面左端へ */
  z-index: -1;
  width: 100vw;
  height: 381px; /* 実測 983:2617/2633: h381 */
  background: #f3fbff; /* 実測: #F3FBFF */
  content: "";
}

/* 🔒 49件「こだわり: ・『羽毛を個別管理』明朝体→01〜04まで再度ご確認 ・01と下揃え ・角丸部分」 */
.p-futon__point-head {
  display: flex;
  align-items: baseline; /* 実測: 番号とタイトルは**下揃え**（従来の center は誤り） */
  gap: 11px;
  margin: 0;
}

.p-futon__point-num {
  color: #5fcafd; /* 実測 937:2477: #5FCAFD */
  font-family: "Buenard", serif; /* 実測: Buenard 500 */
  font-size: clamp(48px, 39.576px + 2.16vw, 70.68px);
  font-weight: 500;
  line-height: 1;
}

.p-futon__point-title {
  color: #005ca7; /* 実測 937:2478: #005CA7 */
  font-family: "Zen Old Mincho", serif; /* 実測 937:2478: **Zen Old Mincho**（指摘の「明朝体」＝ゴシックで出ていた） */
  font-size: clamp(20px, 15.5428571429px + 1.1428571429vw, 32px);
  font-weight: 700;
  line-height: 1.448;
}

.p-futon__point-text {
  margin: 20px 0 0;
  color: #333333;
  font-size: 18px; /* 実測 937:2479: 18px 500 */
  font-weight: 500;
  line-height: 1.7;
}

/* S-40 装飾（羽・PCのみ）と泡差し替え: 基底では出さない（SPはSP周回で照合） */
.p-futon__price-feather,
.p-futon__contact-feather {
  display: none;
}

/* S-40（8/25指摘①）: このページのcontact帯はFigmaに共通の泡（左上）が無い（937:2442直下に不在・実測） */
.c-contact-band__bubble {
  display: none;
}

.p-futon__point-img {
  display: block;
  /* 🔴 監査#43: Figma SP の写真は x31〜**390＝画面右端まで裁ち落とし**（実測 983:2610 ほか 359×222）。
     実装はコンテンツ幅(361)内で止まっていた。∴ 右の padding ぶん外へ出す。 */
  align-self: flex-start; /* flex の cross 方向 stretch を外し、指定幅を効かせる */
  width: calc(100vw - 31px); /* 実測 983:2610: x31 -> 390(画面右端)＝画面幅 - 左端31 */
  max-width: none; /* 共通リセットの img{max-width:100%} に負けない（罠#15） */
  height: 222px; /* 実測 983:2610: h222（aspect-ratio だと幅を広げた分だけ高くなる） */
  margin-top: 0;
  margin-bottom: 20px; /* 実測: 画像下端1732 -> 番号 y1752 */
  margin-left: 9px; /* 実測: カード左端22 -> 画像左端31 */
  /* 🔒 左上・左下のみ角丸（実測 937:2480: [36,0,0,36]）＝右は画面端まで裁ち落とす */
  border-radius: 18px 0 0 18px;
  object-fit: cover;
  /* 下地なし: 画像の角がアルファ透過（8/24黒角修復）のため、下地があるとグレーの弧が透ける */
}

/* ==========================================================================
   仕上がりイメージ（背景写真＋3ステップ）
   ========================================================================== */
/* 🔴 監査#44（背景写真の位置）: Figma SP のステージ `983:2643` は **x0 y3422 390×348＝画面全幅**。
   実装は `padding: 60px 22px` の内側(361)に収まり、写真と絶対配置の中身が左右22pxぶん縮んでいた。
   ∴ 横paddingを外し、ステージを画面幅で置く（絶対配置の % は 390 基準のまま効く）。 */
.p-futon__result {
  position: relative;
  margin-top: 90px;
  padding: 60px 0;
}

/* S-37 写真帯（Figma実測の切り抜き再現）。PCの寸法は下のPCブロックで指定する。
   SP周回(8/27): SPもPCと同じ帯方式に統一（Figma SP 983:2643 は 390×348 のマスクに
   写真 983:2645 x-324 y3362.3 1005×575 を敷いた構成＝白オーバーレイは存在しない）。
   🔒 SP値は max-width 内に閉じる（基底に置くとPCの 80.39%/104.68% を上書きしてPC帯が壊れる） */
.p-futon__result-photo {
  position: absolute;
  left: 0;
  display: block;
  overflow: hidden;
}

.p-futon__result-photo img {
  position: absolute;
  height: auto;
}

@media (max-width: 768px) {
  /* 🔴 2026-08-27 ユーザー指摘: SPのFV右下にピンクの泡が出ていたが、
     Figma SP(983:2547 Subpage_FV_SP)の中身は
       泡2つ（983:2549 小17.6 / 983:2550 大127.9・**どちらも水色**）＋
       羽3つ（983:2553 右上50.6×51.3 / 983:2552 右下31.7×30.1 / 983:2558 中右16.9×19）
     で、**ピンクの泡は存在しない**。PCブロックでは既に top/small/bottom を消していたが
     SPに同じ指定が無く、既定の bottom=ピンクがそのまま出ていた。
     ∴ SPでも bottom/top を消し、代わりに**羽をSP実測座標で出す**。 */
  .c-page-title__bubble--top,
  .c-page-title__bubble--bottom {
    display: none;
  }
  /* 羽はFVキャンバス（390座標系）に絶対配置する。%はすべて 390 基準の実測値 */
  .p-futon__fv-extra-canvas {
    position: relative;
  }
  .p-futon__fv-feather {
    position: absolute;
    display: block;
  }
  /* 983:2553 右上 x283 y-3 w50.6 */
  .p-futon__fv-feather--big {
    top: -3px;
    left: 72.56%; /* 283/390 */
    width: 12.97%; /* 50.6/390 */
    height: auto;
  }
  /* 983:2552 右下 x356 y223 w31.7 */
  .p-futon__fv-feather--small {
    top: 223px;
    left: 91.28%; /* 356/390 */
    width: 8.13%; /* 31.7/390 */
    height: auto;
  }
  /* 983:2558 中右 x295.7 y167 w16.9 */
  .p-futon__fv-feather--left {
    top: 167px;
    left: 75.82%; /* 295.7/390 */
    width: 4.33%; /* 16.9/390 */
    height: auto;
  }
  /* 帯はinner（ステージ）内の絶対配置＝親はinner。実測 983:2643: ステージ上端から390×348 */
  .p-futon__result-photo {
    top: 0;
    left: 50%;
    width: 100vw;
    height: 348px;
    transform: translateX(-50%);
  }
  /* 🔴 2026-08-27 ユーザー指摘: 女性が小さく左端で切れていた。
     旧値は Figma のノード寸法(1005×575・x-324)をそのまま当てたものだが、
     **書き出し素材(3402×1944)とFigma上の見え方が一致しない**ため縮尺がずれていた。
     ∴ Figma正解画像のマスク領域(390×348)と素材を突き合わせて総当たりで縮尺を実測し、
     差が最小になる値を採用した（幅1260px・左-330px・上-200px）。
     これで女性が大きく左に収まり、Figmaの見え方と一致する。 */
  .p-futon__result-photo img {
    top: -57.47%; /* 実測 -200/348 */
    left: -84.62%; /* 実測 -330/390 */
    width: 323.08%; /* 実測 1260/390 */
    max-width: none; /* reset.scss の max-width:100% が 100%超の拡大を刈るためSPのみ解除 */
  }
}
.p-futon__result-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.p-futon__result-heading {
  margin: 0;
  color: #333333; /* 実測 937:2554: #333333 */
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px);
  font-weight: 700;
  line-height: 1.448;
}

.p-futon__result-text {
  margin: 24px 0 0;
  color: #333333;
  font-size: clamp(16px, 14.5142857143px + 0.380952381vw, 20px); /* 実測 937:2555: 20px 500 */
  font-weight: 500;
  line-height: 1.7;
}

/* 🔒 49件「仕上がりイメージ: もう一度デザインをご確認ください」で補った要素群
   （Before/After布団・矢印・弧テキスト・バッジ・ラベル・羽根・見出しの泡）
   SPは縦に流す簡易配置。PCは実測(937:2537 1625×724)の比率で絶対配置する */
.p-futon__result-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.p-futon__result-bubble {
  width: 42px; /* 実測 937:2553 */
  height: 42px;
}

/* 🔒 SPもPCと同じ構図（実測 983:2642 390×379）。装飾も**すべて存在する**
   （当初「SPには無い」と判断したのは誤りで、実測で確認して配置し直した） */
.p-futon__result-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 390/379;
}

/* 🔴 監査#44 / 罠#19: 本文の改行は PC=2行 / SP=4行 で違う（Figma 937:2555 / 983:2663） */
.p-futon__result-text--pc {
  display: none;
}

.p-futon__result-heading {
  position: absolute;
  top: 6.07%;
  left: 20.51%;
  gap: 10px;
  margin: 0;
}

.p-futon__result-bubble {
  width: 29px; /* 実測(SP) 983:2661 */
  height: 29px;
}

.p-futon__result-text {
  position: absolute;
  top: 22.69%;
  left: 34.36%;
  width: 65.64%;
  margin: 0;
  text-align: left;
}

/* 🔴 2026-08-27 ユーザー指摘: SPの「仕上がりイメージ」と本文は**白文字**。
   Figma SP実測: 見出し 983:2662 = #FFFFFF ／ 本文 983:2663 = #FFFFFF。
   PC(937:2554/2555)は #333333 が正しいので、**SP幅のときだけ**白へ上書きする。
   ⚠️ ここは上の無条件指定より後ろに置くこと（前に置くと同じ詳細度で負ける）。
   写真の上に載る文字なので、明るい写真でも輪郭が保てるよう薄い影を添える。 */
@media (max-width: 768px) {
  .p-futon__result-heading,
  .p-futon__result-text {
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  }
}
.p-futon__result-before {
  position: absolute;
  top: 73.88%;
  left: 6.15%;
  width: 46.15%;
  height: auto;
}

.p-futon__result-after {
  position: absolute;
  top: 67.02%;
  left: 50.77%;
  width: 44.87%;
  height: auto;
}

.p-futon__result-arrow {
  position: absolute;
  top: 62.53%;
  left: 40.26%;
  display: block;
  width: 19.23%;
}

/* 🔒 K-7: Figmaの弧テキスト(983:2659)は**回転したテキスト**で、
   absoluteBoundingBox(133.8角=34.31%)は回転を含む外接矩形＝インクの実寸ではない。
   書き出したSVGはインク(absoluteRenderBounds 71.1×98.8)なので、位置・幅も
   renderBounds で合わせる（bb基準だと拡大＋左寄りでAfter布団とバッジに潜り込む）。 */
.p-futon__result-arc {
  position: absolute;
  top: 57.65%; /* 実測(SP) 983:2659 renderBounds */
  left: 81.76%;
  display: block;
  width: 18.24%;
  height: auto; /* SVG本来の縦横比を保つ（heightを固定すると歪む） */
}

.p-futon__result-badge {
  position: absolute;
  top: 78.63%;
  left: 81.28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 13.59%;
  aspect-ratio: 1;
  border: 1px solid #feb2c7;
  border-radius: 50%;
  background: #ffffff;
  color: #feb2c7;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.p-futon__result-badge strong {
  font-size: 12px;
  font-weight: 700;
}

.p-futon__result-label {
  position: absolute;
  top: 89.18%;
  display: block;
  color: #333333;
  font-family: "Zen Old Mincho", serif;
  font-size: 14px; /* 実測(SP) 983:2646/2647 */
  font-weight: 700;
}

.p-futon__result-label--before {
  left: 15.9%;
}

.p-futon__result-label--after {
  left: 68.72%;
}

/* 羽根はSPフレームに無い（実測） */
.p-futon__result-feather {
  display: none;
}

/* 🔴 監査#44: Figma SP の効果アイコン3つは **横並び（2＋1）**。
   実測 `983:2664` x23 y3806 166×52 ／ `983:2667` x214 y3807 148×52 ＝ 1段目に2つ、
   `983:2670` x108 y3883 173×51 ＝ 2段目に1つを中央。実装は縦積み(1fr×3)だった。 */
.p-futon__steps {
  position: relative;
  z-index: 2; /* `.p-futon__result::before` の白オーバーレイより前面（薄く見えるのを防ぐ） */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 0; /* 実測: 1段目 y3806 -> 2段目 y3883 ＝ 77 - 行高52 */
  margin: 40px 0 0;
  padding: 0 22px;
  list-style: none;
}

/* 3つ目は2段目の**中央**（実測 983:2670 x108＝左右の中心） */
.p-futon__steps > .p-futon__step:nth-child(3) {
  grid-column: 1/-1;
  justify-self: center;
}

.p-futon__step {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 実測: 円 -> 文字 の並びは左詰め（中央寄せは2列に入らない） */
  gap: 7px; /* 実測 983:2664: itemSpacing 7.24 */
}

.p-futon__step-icon {
  flex-shrink: 0;
  width: 51px; /* 実測 983:2665: 51×51（PCは80） */
  height: 51px;
}

.p-futon__step-text {
  color: #333333;
  font-size: clamp(18px, 15.7714285714px + 0.5714285714vw, 24px); /* 実測 937:2541: 24px 500 */
  font-weight: 500;
  line-height: 1.46;
  text-align: left;
}

/* ==========================================================================
   price（4列の表）
   ========================================================================== */
.p-futon__price {
  margin-top: 90px;
  padding: 0 22px;
}

/* 見出し -> 表（実測(SP)） */
.p-futon__price .c-price-table {
  margin-top: 60px;
}

/* ==========================================================================
   タブレット以上（769px〜）＝比率で組む
   ========================================================================== */
@media (min-width: 769px) {
  /* 🔴 監査#37: FV本文をFV帯へ重ねるための位置基準（PCのみ） */
  .p-futon {
    position: relative;
  }
  /* 🔴 監査#37: PCだけ c-page-title と同じ 1440 キャンバスを敷き、その上に本文を絶対配置する。
     __fv-extra は **高さを持たない**（margin-top で c-page-title の 594px 帯へ引き上げる）ため、
     後続の worry セクションの位置は変わらない。 */
  .p-futon__fv-extra {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 594px; /* c-page-title PCキャンバス高（common.scss 実測値）に重ねる */
    pointer-events: none;
  }
  .p-futon__fv-extra-canvas {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 1440px;
    height: 594px;
    transform: translateX(-50%) scale(min(1, calc(100vw / 1440px)));
    transform-origin: top center;
  }
  /* 本文はテキスト選択できるよう当たり判定を戻す */
  .p-futon__fv-text {
    pointer-events: auto;
  }
  /* 🔴 監査#37 FV本文2段落目の位置
     Figma 937:2611 Description は **FV帯の中**（x111 y392 w722・FV枠 937:2598 は y-54〜526）。
     実装は c-page-title（PCキャンバス固定594px）の**後ろ**に流れる別ブロックだったため
     y=624 ＝ Figma換算 396 より **228px 下**に落ちていた（＝FV高が伸びて見えた事象の実体）。
     ∴ c-page-title と同じ 1440 キャンバス座標系に載せ、キャンバスの scale をそのまま適用する。
     （共通部品 c-page-title は変更しない＝自ページ側で閉じる） */
  .p-futon__fv-text {
    position: absolute;
    top: 392px; /* 実測 937:2611 y */
    left: 111px; /* 実測 937:2611 x（テキスト群 937:2608 と同じ左端） */
    z-index: 2;
    width: 722px; /* 実測 937:2611 w */
    margin: 0;
    padding: 0;
  }
  /* S-34 FVの羽3つ（1440キャンバス実測座標。bigは上端が帯外へ出る＝キャンバスのoverflowで切る） */
  .p-futon__fv-extra-canvas {
    overflow: hidden;
  }
  .p-futon__fv-feather {
    position: absolute;
    display: block;
  }
  .p-futon__fv-feather--big {
    top: -54px; /* 実測 937:2601 */
    left: 1247px;
    width: 283px;
  }
  .p-futon__fv-feather--small {
    top: 267px; /* 実測 937:2607 */
    left: 1300px;
    width: 92px;
  }
  .p-futon__fv-feather--left {
    top: 431px; /* 実測 937:2602 */
    left: 866px;
    width: 85px;
  }
  /* S-34 このページのFVはFigmaに共通泡セット（top/small/bottom）が無い＝大玉と羽だけ（PC実測） */
  .c-page-title__bubble--top,
  .c-page-title__bubble--small,
  .c-page-title__bubble--bottom {
    display: none;
  }
  /* 🔴 監査#37: 旧 margin-top:100px は「流し込みの fv-text を避ける」ための値だった。
     fv-text をFV帯へ絶対配置した今は不要（＝FV高が100px伸びて見えた分）。
     Figma 937:2583 見出し y587 ／ c-page-title PC帯の下端 594 ＝ **ほぼ密着**（実測 -7px）。 */
  .p-futon__worry {
    width: min(942px, 100% - 80px); /* 実測(PC): Section Heading 942幅 */
    margin: -7px auto 0; /* 実測: 帯下端594 -> 見出し587 */
    padding: 0;
  }
  /* 🔒 PCは実測どおり四方へ散らす（937:2584 942×281・イラスト 937:2597 は下へ172px はみ出す）
     ∴ステージ高は吹き出し帯(281)ではなく **イラスト下端まで=453**（y681〜1134） */
  .p-futon__worry-stage {
    position: relative;
    z-index: 3; /* 🔴 監査#38: 後続の青帯より前面（DOM後勝ちを打ち消す） */
    /* SPの全幅化（監査#42）を打ち消す＝PCはコンテンツ枠(942)の中 */
    width: 100%;
    margin-top: 48px; /* 実測(PC): 見出し下端633 -> 吹き出し上端681 */
    margin-left: 0;
    aspect-ratio: 942/453;
  }
  .p-futon__bubble {
    padding: 14px 18px;
    font-size: 20px; /* 実測(PC) 937:2587 ほか: 20px 700 */
  }
  /* 改行はSPのみ（PCは1行で入る） */
  .p-futon__bubble-br {
    display: none;
  }
  .p-futon__bubble--fukurami {
    top: 5.3%;
    left: 13.38%;
    width: 29.94%;
    height: 25.17%;
  }
  .p-futon__bubble--herutta {
    top: 0%;
    left: 47.77%;
    width: 30.15%;
    height: 25.61%;
  }
  .p-futon__bubble--yabure {
    top: 30.68%;
    left: 70.17%;
    width: 29.83%;
    height: 25.83%;
  }
  .p-futon__bubble--fukidashi {
    top: 36.64%;
    left: 0%;
    width: 29.94%;
    height: 25.39%;
  }
  /* 中央のイラスト（実測 937:2597: x542 y847 358×287） */
  .p-futon__worry-illust {
    position: absolute;
    top: 36.64%; /* 実測 937:2597: y847 (ステージ y681 起点 / 453) */
    left: 31.1%;
    z-index: 3; /* 🔴 監査#38: 青帯(.p-futon__solve)に**重なる**＝人物が前面 */
    display: block;
    width: 38%; /* 実測 937:2597: 358/942（SPの 55.64% を打ち消す） */
    height: auto;
  }
  /* 🔴 監査#38: Figmaは **夫婦イラストの下半分が青帯に重なる**（帯は胸の高さから）。
     実測 937:2597 イラスト y847〜**1134** ／ 937:2576 青帯 y**1110**〜1306
     ＝ 帯の上端がイラスト下端より **24px 上**（＝重なり24px）。
     旧 margin-top:120px は帯を144px下へ押し下げ、人物が帯の上で完結していた。
     ∴ 帯を吹き出しステージ下端(1134)から -24px 引き上げ、イラストを前面に出す。 */
  .p-futon__solve {
    margin-top: -24px; /* 実測(PC): ステージ下端1134 -> 帯上端1110（SPの -16px を打ち消す） */
  }
  .p-futon__solve-band {
    padding: 55px 22px; /* 実測(PC) 937:2576: h196 */
  }
  .p-futon__solve-body {
    padding: 53px 0 66px; /* 実測(PC) 937:2575: h368 */
  }
  .p-futon__solve-text {
    width: min(896px, 100% - 80px); /* 実測 937:2580: 896幅 */
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* 🔒 49件「本文左揃え」＝実測 937:2580 は align=LEFT（中央揃えは誤り） */
  }
  .p-futon__point {
    width: min(1320px, 100% - 80px);
    margin: 120px auto 0;
    padding: 0;
  }
  .p-futon__point-card {
    display: flex;
    flex-direction: row; /* SPの column-reverse（監査#43）を打ち消す＝PCは横並び */
    align-items: center;
    gap: 6.9%;
    margin-top: 55px; /* 実測(PC): card送り 約377 - 内容高 */
  }
  /* SPの帯（監査#43）はPCでは出さない＝PC側は別実測値の帯（監査#39）を使う。
     🔒 S-39（8/25指摘）: 旧 top:50%+translateY(-50%) は**カード中央基準**で上下に14pxずつはみ出す＝誤り。
     Figma実測: **帯上端=画像上端**（02: 937:2489 y2244 = 937:2496 y2244・04は+5px=手置きノイズと判断）
     ・下だけ+28px（347=画像319+28）。カード高=画像高（align-items:center・画像が最長）のため top:0 で一致 */
  .p-futon__point-card--band::before {
    top: 0;
    left: calc((min(1320px, 100vw - 80px) - 100vw) / 2); /* コンテンツ枠左端 -> ビューポート左端 */
    width: 72.71vw; /* 実測: 1047 / 1440 */
    height: 347px; /* 実測 937:2489/2498: h347 */
    /* 実測 rectangleCornerRadii [TL,TR,BR,BL] = [0,0,24,0] ＝ **右下だけ**24px */
    border-radius: 0 0 24px 0;
  }
  .p-futon__point-body {
    flex: 1;
    min-width: 0;
  }
  /* 🔴 監査#39: Figma 937:2480 ほか Step Image は x880〜**1440＝フレーム右端まで裁ち落とし**。
     実装はコンテンツ幅(1320・中央寄せ)の内側で止まり、右に60px の余白が残っていた。
     ∴ コンテンツ枠から右へはみ出させ、ビューポート右端まで伸ばす。 */
  .p-futon__point-img {
    flex-shrink: 0;
    width: 42.4%; /* 560/1320 */
    max-width: none;
    /* コンテンツ枠の右外側（ビューポート右端）まで裁ち落とす */
    margin-right: calc((min(1320px, 100vw - 80px) - 100vw) / 2);
    /* SP（監査#43）の値を打ち消す */
    margin-bottom: 0;
    margin-left: 0;
    /* 🔴 右へ伸ばしても**高さは実測どおり319固定**（aspect-ratio のままだと行高が357へ膨らむ）。
       はみ出した分は object-fit:cover が横方向に吸収する。 */
    height: 319px; /* 実測 937:2480: h319 */
    aspect-ratio: auto;
    margin-top: 0;
    border-radius: 36px 0 0 36px; /* 実測(PC) 937:2480: [36,0,0,36]（従来の 0 は取りこぼし） */
  }
  .p-futon__result {
    margin-top: 160px;
    padding: 0 0 60px;
    /* S-37: PCの写真は__result-photo（Figma実測の帯切り抜き）で出す＝coverの全面敷きをやめる */
    background-image: none;
  }
  /* S-37: Figmaに白オーバーレイは存在しない（写真自体が淡色加工済み）＝被せない。
     旧「白70%被せ」が人物まで洗っていた（8/25指摘④） */
  .p-futon__result::before {
    display: none;
  }
  /* 🔒 PCは実測どおりの絶対配置（ステージ 1625×724・Figma 937:2537）。
     🔴 S-37: ステージはページ幅1440ではなく **x-115〜1510 の 1625px**（Figma実測）。
     旧実装は 0〜1440 に圧縮＝全要素が約11%縮小＋右寄りにズレていた（8/25指摘④の主因）。
     幅1625/1440=112.847%・左端-115/1440=-7.986% で座標系ごと直す（右のはみ出しはl-mainのclipが切る） */
  .p-futon__result-inner {
    position: relative;
    width: 112.847%;
    margin-left: -7.986%;
    aspect-ratio: 1625/724;
  }
  /* S-37 写真帯: マスク937:2549＝ステージ上端〜582/724（80.39%）。写真937:2550は x-114 y3321 1701×972
     ＝帯内で left (−114+115)/1625=0.06%・top (3321−3534)/582=−36.6%・幅 1701/1625=104.68% */
  .p-futon__result-photo {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 80.39%;
    overflow: hidden;
  }
  .p-futon__result-photo img {
    position: absolute;
    top: -36.6%;
    left: 0.06%;
    width: 104.68%;
    height: auto;
  }
  .p-futon__result-heading {
    position: absolute;
    top: 11.88%; /* 実測 937:2552: y3620 */
    left: 51.88%;
    justify-content: flex-start;
    margin: 0;
  }
  /* PCは2行版を出し、SP専用の4行版を隠す（罠#19） */
  .p-futon__result-text--pc {
    display: block;
  }
  .p-futon__result-text--sp {
    display: none;
  }
  .p-futon__result-text {
    position: absolute;
    top: 24.45%; /* 実測 937:2555: y3711 */
    left: 51.88%;
    width: 27.14%; /* 実測 441/1625（2行で収まる幅） */
    margin: 0;
    font-size: 20px; /* 実測 937:2555: 20px（clampで縮むと3行になる） */
    text-align: left;
    white-space: nowrap; /* Figmaは<br>指定の2行＝折返しさせない */
  }
  .p-futon__result-before {
    position: absolute;
    top: 60.5%;
    left: 24.62%;
    width: 25.54%;
    margin: 0;
  }
  .p-futon__result-after {
    position: absolute;
    top: 52.9%;
    left: 49.35%;
    width: 23.45%;
    margin: 0;
  }
  .p-futon__result-arrow {
    position: absolute;
    top: 49.86%;
    left: 43.63%;
    display: block;
    width: 10.09%;
  }
  /* 🔒 K-7: 同上。bb(290.3角=17.86%)ではなく renderBounds(166.9×186.8)で配置する */
  .p-futon__result-arc {
    position: absolute;
    top: 42.06%; /* 実測 937:2568 renderBounds */
    left: 64.73%;
    display: block;
    width: 10.27%;
    height: auto;
  }
  .p-futon__result-feather {
    position: absolute;
    top: 22.51%;
    left: 83.63%;
    display: block;
    width: 5.17%;
  }
  /* 「側生地 新品！」バッジ（実測 937:2564: 115×115 円・文字24/29.7） */
  .p-futon__result-badge {
    position: absolute;
    top: 65.19%;
    left: 68.62%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 7.08%;
    aspect-ratio: 1;
    border: 1px solid #feb2c7;
    border-radius: 50%;
    background: #ffffff;
    color: #feb2c7;
    line-height: 1.2;
  }
  .p-futon__result-badge span {
    font-size: 24px;
    font-weight: 700;
  }
  .p-futon__result-badge strong {
    font-size: 29.7px;
    font-weight: 700;
  }
  .p-futon__result-label {
    position: absolute;
    top: 78.31%;
    display: block;
    color: #333333;
    font-family: "Zen Old Mincho", serif;
    font-size: 24px; /* 実測 937:2556/2557 */
    font-weight: 700;
  }
  .p-futon__result-label--before {
    left: 38.71%;
  }
  .p-futon__result-label--after {
    left: 64.12%;
  }
  .p-futon__steps {
    /* 実測(PC) 937:2538: 3項目を横並び（914幅）。
       S-37: Figmaはsteps(y4178..4258)が**ステージ内**（下端=ステージ下端）＝流しの40px下がりでは
       62+80px低い → -80pxでステージ内へ引き上げる（steps下端をinner下端に一致させる） */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2%; /* SP（監査#44）の 25px 0 を打ち消す */
    width: min(914px, 100% - 80px);
    margin: -80px auto 0;
  }
  /* SPの2＋1（監査#44）を打ち消して3列に戻す */
  .p-futon__steps > .p-futon__step:nth-child(3) {
    grid-column: auto;
    justify-self: stretch;
  }
  .p-futon__step {
    justify-content: flex-start;
    gap: 24px; /* 実測(PC): 円右端343 -> 文字369（SPは7px） */
  }
  .p-futon__step-icon {
    width: 80px; /* 実測 937:2540: 80×80（SPは51px） */
    height: 80px;
  }
  .p-futon__price {
    position: relative; /* S-40 羽の基準 */
    width: min(926px, 100% - 80px); /* 実測(PC): price枠 926幅 */
    margin: 160px auto 0;
    padding: 0;
  }
  .p-futon__price .c-price-table {
    margin-top: 90px;
  }
  /* S-40 表の左上の羽（実測 937:2632: x32 y4405 158×151。price枠x257基準で -225,-13） */
  .p-futon__price-feather {
    position: absolute;
    top: -13px;
    left: -225px;
    display: block;
    width: 158px;
    pointer-events: none;
  }
  /* S-40 contact帯右上の大羽（実測 937:2637: x1289 y5045＝帯上端5158の113px上・右端は画面外へ8px） */
  .p-futon__contact-wrap {
    position: relative;
  }
  .p-futon__contact-feather {
    position: absolute;
    top: -113px;
    left: 89.51%; /* 1289/1440 */
    z-index: 1;
    display: block;
    width: 12.43%; /* 179/1440 */
    pointer-events: none;
  }
  /* S-40（8/25指摘②）: こだわりのタイトル→本文の間隔（Figma実測 937:2478下端2027→937:2479上端2074=47px・
     本文lhも25.2/18=1.4が実測。旧20px/1.7は狭く見えていた＝指摘どおり） */
  .p-futon__point-text {
    margin-top: 47px;
    line-height: 1.4;
  }
}
/* 見出し左の円＝Figma SP実測 29×29・円→文字の間隔10px（全ページ一様・2026-08-28夜 実測
   deluxe/futon/house/tokusyu/option/btob/kaiin/shiminuki の各SPフレームで円29.0を確認）。
   従来の42pxはPC実測値がSPへ漏れていたもの（ユーザー指摘 匠②） */
@media (max-width: 768px) {
  .p-futon__heading {
    gap: 10px;
  }
  .p-futon__heading-bubble {
    width: 29px;
    height: 29px;
  }
}