@charset "UTF-8";
/* ==========================================================================
   p-deluxe  デラックス・ボーテ（下層①・3枚目）
   出典: Figma PC 937:621（1440×5052）/ SP 983:2871（390×5734）
   数値・色・フォントは 2026-08-17 に複製ファイル 7mtkWMsn0sdmf3RR28D84u から
   REST /nodes で実取得した値。目視推測ゼロ。

   🔒 タブレット帯（769-1439px）の方針＝**固定pxを置かず比率で組む**
      （2026-08-17 サービス一覧で固定579px列が810px幅で521px溢れた反省）。
      この帯にFigmaデザインは無く、合格基準は「崩れないこと」。数値照合はPC1440/SP390のみ。

   設計座標（PC）: FV y50 / point y627 / price y1982 / voice y2695 / contact y3994
   設計座標（SP）: FV y24 / point y277.5 / price y2165.5 / voice y3104 / contact y4650
   ========================================================================== */
/* --- 共通見出し（32px PC / 24px SP・ゴシック太字） --- */
/* 🔒 監査#21: Figmaは3見出しとも**バブル付き**（実装は単なる中央テキストだった）。
   揃えは「泡＋テキスト」群の中心で判定:
     こだわり 937:832/833 群 L120–R506 中心313 → 左寄せ（--left）
     料金     937:759/760 群 L550–R904 中心727 → 中央
     お客様の声 937:722/723 群 L619–R845 中心732 → 中央（c-voice 側で実装済み）
   SPも同型（983:3047/3043/2981 とも泡＋左テキストの群） */
.p-deluxe__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px; /* 実測(PC): 泡右端162 -> テキストx186 */
  margin: 0;
  color: #333333; /* 実測 937:833 / 983:3047: #333333 */
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px);
  font-weight: 700;
  line-height: 1.448; /* 実測: 46.336/32 */
  text-align: left;
}

.p-deluxe__heading--left {
  justify-content: flex-start;
}

.p-deluxe__heading-bubble {
  display: block;
  flex-shrink: 0;
  width: 28px; /* 実測(SP) */
  height: 28px;
  object-fit: contain;
}

/* ==========================================================================
   point（3カード・02のみ帯背景）
   ========================================================================== */
.p-deluxe__point {
  margin-top: 30px; /* 実測(SP): FV下端247.5 -> point y277.5 */
  padding: 0 22px;
}

/* 🔒 監査#23「Figma SPは 写真→番号見出し→本文、実装は 番号見出し→本文→写真」
   実測 SP `983:3048`(item_03): Image y1545 → Number/Title y1787 → Description y1890
   ＝**写真が先**。PCは写真が右の横並び（DOM順どおり）が正なので、
   マークアップ順は変えずSPだけ視覚順を反転する（#8 と同じ手当て）。 */
.p-deluxe__point-card {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 67px; /* 実測(SP): 見出し下端312.5 -> card01 y382.5 ＝ 70（見出し行高差で67） */
}

/* 02のみ背景帯（実測 937:816 / SPは card_02 が全幅） */
.p-deluxe__point-card--band {
  margin-right: -22px;
  margin-left: -22px;
  padding: 30px 22px;
  background: #f3fbff; /* 実測: #F3FBFF */
}

.p-deluxe__point-head {
  display: flex;
  align-items: center;
  gap: 11px; /* 実測(SP): num右端86 -> title x94 */
  margin: 0;
}

.p-deluxe__point-num {
  color: #5fcafd; /* 実測 937:827: #5FCAFD */
  font-family: "Buenard", serif; /* 実測: Buenard 500 */
  font-size: clamp(64px, 61.5188571429px + 0.6361904762vw, 70.68px); /* 実測: SP64 / PC70.68 */
  font-weight: 500;
  line-height: 1;
}

.p-deluxe__point-title {
  color: #005ca7; /* 実測 937:828: #005CA7 */
  font-family: "Zen Old Mincho", serif; /* 実測: Zen Old Mincho 700 */
  font-size: clamp(20px, 15.5428571429px + 1.1428571429vw, 32px); /* 実測: SP20 / PC32 */
  font-weight: 700;
  line-height: 1.448;
}

.p-deluxe__point-text {
  margin: 20px 0 0; /* 実測(SP): 見出し下端 -> 本文 */
  letter-spacing: 0; /* Figma実測: ls0（既定字間だと折返し位置が1字ズレる） */
  color: #333333;
  font-size: 18px; /* 実測: PC/SP共通18 */
  font-weight: 500;
  line-height: 1.7; /* 実測: 30.6/18 */
}

.p-deluxe__point-img {
  display: block;
  width: 100%;
  max-width: 359px; /* 実測(SP) 983:3065: 359×222 */
  height: auto;
  aspect-ratio: 359/222;
  margin-top: 24px;
  border-radius: 16px; /* 実測(SP): r16 */
  object-fit: cover;
  /* 下地なし: 画像の角がアルファ透過（8/24黒角修復）のため、下地があるとグレーの弧が透ける */
}

@media (min-width: 769px) {
  /* Figma実測(PC): タイトル上端=番号上端+36・タイトル→本文gap47（8/24同席確認①・基底より後に置いて優先） */
  /* 8/24深夜 作り替え: 固定pxの調整はビューポート幅・フォント描画差でずれるため、
     番号とタイトルを**ベースライン揃え**にする（Figma実測: num基線868≒title基線868＝基線一致設計）。
     これでどの画面幅でも文字の下端基準で揃う */
  .p-deluxe__point-head {
    align-items: baseline;
    gap: 38px; /* Figma実測: 番号右端181→タイトル左219 */
  }
  .p-deluxe__point-text {
    margin-top: 47px; /* 描画gap47に着地 */
  }
}
/* ==========================================================================
   price（メンズ／レディースの2表）
   ========================================================================== */
.p-deluxe__price {
  margin-top: 90px; /* 実測(SP): point下端2075.5 -> price y2165.5 */
  padding: 0 10px; /* 実測(SP): price枠 x10 w372 */
}

.p-deluxe__price-tables {
  margin-top: 55px; /* 実測(SP): 見出し下端2200.5 -> item_men y2270.5 */
}

.p-deluxe__price-panel + .p-deluxe__price-panel {
  margin-top: 50px; /* 実測(SP): item_men下端2617.5 -> item_woman y2667.5 */
}

.p-deluxe__price-note {
  margin: 33px 0 0;
  color: #828282; /* 実測 937:757: #828282 */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   タブレット以上（769px〜）＝**比率で組む**。固定pxはPC1440専用ブロックへ置く
   ========================================================================== */
@media (min-width: 769px) {
  /* 監査#21: PCの泡は42px（実測 937:832/759/722） */
  .p-deluxe__heading-bubble {
    width: 42px;
    height: 42px;
  }
  /* 左寄せ見出しはコンテンツ左端に合わせる（実測 937:832 の泡左端 x120。
     .p-deluxe__point 自体は padding:0 の全幅枠なので見出し側で内側に寄せる） */
  .p-deluxe__heading--left {
    padding-left: 120px;
  }
  .p-deluxe__point {
    /* 実測(PC): point枠 1440幅・内側インナー x120 w1320 */
    margin-top: 80px;
    padding: 0;
  }
  .p-deluxe__point-card {
    /* Figma実測(8/25再測): 本文x120（インナー左）・画像x880〜1440＝**右端まで裁ち落とし** */
    display: flex;
    flex-direction: row; /* SPの column-reverse を戻す（PCは写真が右＝DOM順どおり） */
    align-items: center;
    gap: 6.9%; /* 実測(PC): 本文右端782 -> 画像x880 ＝ 98/1440 */
    width: 100%;
    max-width: none;
    margin: 28px 0 0;
    padding-left: calc((100% - min(1200px, 100% - 80px)) / 2); /* インナー左端=Figma x120 */
  }
  /* 02の帯（Figma実測 8/25: 帯=左端0〜x1047で**画像の途中で止まる**・右下角丸24・
     画像上端=帯上端・帯は画像より28px下まで） */
  .p-deluxe__point-card--band {
    position: relative;
    z-index: 0;
    margin-top: 56px;
    margin-right: 0;
    margin-left: 0;
    /* SP用 padding(30px 22px) を明示上書き（上=画像を帯上端へ・左=インナー左・下28=帯が画像より下へ） */
    padding: 0 0 28px calc((100% - min(1200px, 100% - 80px)) / 2);
    background: none;
  }
  .p-deluxe__point-card--band::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    /* 帯右端=インナー左+927（Figma: 1047-120。インナー幅1200比0.7725で可変追従） */
    width: calc((100% - min(1200px, 100% - 80px)) / 2 + min(1200px, 100% - 80px) * 0.7725);
    border-radius: 0 0 24px 0;
    background: #f3fbff; /* 実測 937:816: #F3FBFF */
  }
  .p-deluxe__point-body {
    flex: 1;
    min-width: 0;
  }
  .p-deluxe__point-img {
    flex-shrink: 0;
    width: 38.9%; /* 実測(PC): 560/1440 */
    max-width: 560px;
    aspect-ratio: 560/319;
    margin-top: 0;
    border-radius: 36px 0 0 36px; /* Figma実測 8/25: [36,0,0,36]＝左のみ角丸（旧「角丸なし」は誤り） */
  }
  .p-deluxe__price {
    /* 実測(PC): point枠下端1822 -> price y1982 ＝ 160 */
    width: min(965px, 100% - 80px);
    margin: 160px auto 0;
    padding: 0;
  }
  .p-deluxe__price-tables {
    display: flex;
    gap: 6.5%; /* 実測(PC): item01右端695 -> item02 x758 ＝ 63/965 */
    margin-top: 80px;
  }
  .p-deluxe__price-panel {
    flex: 1;
    min-width: 0;
  }
  .p-deluxe__price-panel + .p-deluxe__price-panel {
    margin-top: 0;
  }
  /* 白カード（実測 937:719: 963×1033 r16・背景枠の内側） */
  /* 区切線: item下端 +25 の位置（実測 3154->3179.2 / 3425->3450.2） */
}
/* ==========================================================================
   PC 1440px以上＝Figma PC版の固定値を厳密再現する帯
   （769-1439pxは上のブロックの比率のまま＝崩れないことだけを担保）
   ========================================================================== */
@media (min-width: 1440px) {
  .p-deluxe__point-card {
    gap: 98px; /* 実測(PC): 本文右端782 -> 画像x880 */
  }
  .p-deluxe__point-img {
    width: 560px; /* 実測(PC) 937:830: 560×319 */
  }
  .p-deluxe__price-tables {
    gap: 63px; /* 実測(PC): 451+63+451 = 965 */
  }
}
/* SP周回（2026-08-27）: FVサブ折返し幅（983:3078 実測 w296。「シミ取り、/風合い」で折る）。768px以下限定 */
@media (max-width: 768px) {
  .p-deluxe .c-page-title__subtitle--sp {
    width: 295px; /* 幅走査: 行構成18/17/17（Figma 18/16/17に最近接・1行目一致） */
  }
}
/* SP周回（2026-08-27）: 料金表のSP実測fs（983:3012系: ヘッダ24・行20・行padding8）。768px以下限定 */
@media (max-width: 768px) {
  .p-deluxe .c-price-table__table thead .c-price-table__col {
    font-size: 24px;
    white-space: nowrap; /* 「料金（税込）」を1行に（Figmaどおり） */
  }
  .p-deluxe .c-price-table__table tbody .c-price-table__col {
    padding-block: 8px;
    font-size: 20px;
    line-height: 1.45;
  }
}
/* 見出し左の円＝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-deluxe__heading {
    gap: 10px;
  }
  .p-deluxe__heading-bubble {
    width: 29px;
    height: 29px;
  }
}