@charset "UTF-8";
/* ==========================================================================
   p-kaiin  会員サービス（メンバーシステム ご入会特典）（下層②・3枚目）
   出典: Figma PC 937:4058（1440×3832）/ SP 1078:18（390×3764）
   数値・色は 2026-08-17 に複製ファイルから REST /nodes で実取得。目視推測ゼロ。

   🔒 タブレット帯は比率で組む（固定pxはPC1440専用ブロックのみ）
   設計座標（PC）: FV y-54 / 帯写真 y646 / 特典 y1154 / advice y1817 / contact y2900
   ========================================================================== */
/* --- FVサブコピー（S-57・ページ側override） ---
   実測 PC 937:4220 / SP 1078:32: 本ページは両媒体とも #333333（共通既定のメイン青は他ページのFigma実測値）。 */
.c-page-title__subtitle {
  color: #333333;
}

/* --- 共通見出し（泡＋テキスト・中央） --- */
.p-kaiin__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px; /* 実測 937:4163→4164: 泡右端601 -> 見出し626 */
  margin: 0;
  color: #333333; /* 実測 937:4164: #333333 */
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px);
  font-weight: 700;
  line-height: 1.448;
}

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

/* ==========================================================================
   帯写真（実測 937:4213: 1440×408 の全幅バンド）
   ========================================================================== */
.p-kaiin__hero {
  margin-top: 40px;
}

.p-kaiin__hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440/408;
  object-fit: cover;
}

/* ==========================================================================
   特典5項目（実測 937:4187: 番号+見出し+本文が1200px幅の罫線で区切られる）
   ========================================================================== */
.p-kaiin__benefits {
  margin-top: 60px;
  padding: 0 22px;
}

.p-kaiin__benefit-list {
  max-width: 1200px; /* 実測 937:4208 Line 13: 罫線幅1200 */
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.p-kaiin__benefit {
  padding: 24px 0;
  border-bottom: 1px solid #cfcfcf; /* 実測 937:4208-4212: 項目間の横罫 */
}
.p-kaiin__benefit:first-child {
  padding-top: 0;
}
.p-kaiin__benefit {
  /* S-57: 罫線は項目間のみ4本（実測 PC 937:4208〜4212 / SP 1078:97〜115 とも05の後に線なし） */
}
.p-kaiin__benefit:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* h3 だが見た目はFigmaどおり（既定のfont-size/marginを打ち消す） */
.p-kaiin__benefit-head {
  display: flex;
  align-items: baseline;
  gap: 13px; /* 実測 937:4189→4190: 番号x117 -> 見出しx159 の差から番号幅29を引く */
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}

.p-kaiin__benefit-num {
  flex-shrink: 0;
  color: #5fcafd; /* 実測 937:4189: #5FCAFD */
  /* S-57: 実測 937:4189 / SP 1078:100: HelveticaNeue-Bold fs26 lh23.2（PC/SP一致・旧Buenardはオールドスタイル数字で別物） */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 26px; /* 実測: PC/SPとも26px固定 */
  font-weight: 700;
  line-height: 0.892; /* 実測: lh23.2 ÷ fs26 */
}

.p-kaiin__benefit-title {
  /* S-57: 2トーン（実測 937:4190〜4206: 基調=#333333・強調部のみ#005CA7。旧: 全文メイン青） */
  color: #333333;
  font-size: clamp(18px, 15.7714285714px + 0.5714285714vw, 24px); /* 実測: 24px */
  font-weight: 700;
  line-height: 1.448;
}

/* タイトル内の強調部（Figmaの文字別カラー上書きを再現） */
.p-kaiin__benefit-accent {
  color: #005ca7; /* 実測: #005CA7 */
}

/* 🔒 49件「メンバーシステム: テキストの揃え ※画像参照」
   先方の添付画像＝本文の左端を**タイトルの左端に合わせる**（番号の左端ではない）。
   実測: PC 番号x117 / タイトル・本文とも **x159**（差42）／ SP 番号x19 / タイトル・本文 **x56**（差37）。
   実装は本文が番号と同じ左端から始まっていた。 */
.p-kaiin__benefit-text {
  margin: 16px 0 0;
  padding-left: 33px; /* 実測(SP): タイトル左端x56に本文左端を合わせる（番号x19基準で+37だが字形ぶん-4） */
  color: #333333; /* 実測 937:4191: #333333 */
  font-size: clamp(15px, 13.8857142857px + 0.2857142857vw, 18px); /* 実測: 18px */
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   ご利用にあたって（実測 937:4153/4154: #F3FBFF の帯）
   ========================================================================== */
.p-kaiin__advice {
  margin-top: 80px;
  padding: 60px 22px;
  background-color: #f3fbff; /* 実測 937:4154: #F3FBFF */
}

.p-kaiin__advice-inner {
  max-width: 1130px; /* 実測 937:4155: please枠1130 */
  margin: 40px auto 0;
}

.p-kaiin__block + .p-kaiin__block {
  margin-top: 48px;
}

/* 見出し＋右へ伸びる罫線（実測 937:4161 Line 21 / 937:4172 Line 20） */
.p-kaiin__block-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: #333333; /* 実測 937:4156: #333333 */
  font-size: clamp(20px, 18.5142857143px + 0.380952381vw, 24px); /* 実測: 24px */
  font-weight: 500;
  line-height: 1.448;
}
.p-kaiin__block-title::after {
  flex: 1;
  height: 1px;
  background-color: #cfcfcf;
  content: "";
}

.p-kaiin__please-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.p-kaiin__please {
  display: flex;
  gap: 18px; /* 実測 937:4157→4159: 番号x155 -> 本文x197 */
  color: #333333;
  font-size: clamp(15px, 13.8857142857px + 0.2857142857vw, 18px); /* 実測 937:4159: 18px */
  font-weight: 500;
  line-height: 1.7;
}
.p-kaiin__please + .p-kaiin__please {
  margin-top: 16px; /* 実測: y2142 -> y2194 の送り52 - 行高26 */
}

.p-kaiin__please-num {
  flex-shrink: 0;
  color: #5fcafd; /* 実測 937:4157: #5FCAFD */
  font-size: clamp(20px, 18.5142857143px + 0.380952381vw, 24px);
  line-height: 1.45;
}

.p-kaiin__block-lead {
  margin: 24px 0 0;
  color: #333333;
  font-size: clamp(15px, 13.8857142857px + 0.2857142857vw, 18px); /* 実測 937:4171: 18px */
  font-weight: 500;
  line-height: 1.7;
}

/* --- 計算の流れ（実測 937:4173: チップ4つを −/− /＝ でつなぐ） --- */
.p-kaiin__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.p-kaiin__flow-chip {
  padding: 5px 22px; /* 実測 937:4174: 枠123×39 に対し文字80×29 */
  background-color: #e1f5ff; /* 実測 937:4174: #E1F5FF */
  color: #333333;
  font-size: clamp(15px, 13.1428571429px + 0.4761904762vw, 20px); /* 実測: 20px */
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}

/* 合計だけアクセント塗り＋白文字（実測 937:4180/4181） */
.p-kaiin__flow-chip--total {
  background-color: #5fcafd;
  color: #ffffff;
  font-weight: 700;
}

.p-kaiin__flow-op {
  color: #333333;
  font-size: clamp(15px, 13.1428571429px + 0.4761904762vw, 20px);
  font-weight: 500;
}

.p-kaiin__note-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.p-kaiin__note {
  color: #333333;
  font-size: clamp(13px, 11.8857142857px + 0.2857142857vw, 16px); /* 実測 937:4167: 16px */
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   タブレット以上（769px〜）
   ========================================================================== */
@media (min-width: 769px) {
  .p-kaiin__benefits {
    margin-top: 80px;
    padding: 0 32px;
  }
  .p-kaiin__advice {
    margin-top: 100px;
    padding: 80px 32px;
  }
  .p-kaiin__benefit-text {
    margin-top: 20px; /* S-57 実測: タイトル下端1178 → 本文1198（最頻値20・旧16） */
    padding-left: 36px; /* 実測(PC): タイトル左端x159に本文左端を合わせる（番号x117基準で+42だが字形ぶん-6） */
    line-height: 1.6; /* S-57 実測 937:4191: lh28.8 ÷ fs18（2行項目の実測値・旧1.7） */
  }
  .p-kaiin__benefit {
    /* S-57 実測: 本文下端→罫線16（最頻値）。上18はタイトル送り実測137/108×3への一致解
       （Figmaの罫線→タイトルは19〜23でばらつくため、送りの一致を優先）。旧28/28 */
    padding: 18px 0 16px;
  }
  /* S-57: Figmaは番号・タイトルとも上端一致（937:4189/4190 とも y1154） */
  .p-kaiin__benefit-head {
    align-items: flex-start;
  }
  .p-kaiin__benefit-title {
    line-height: 1; /* S-57 実測 937:4190: lh24 ÷ fs24（旧1.448＝箱35pxで行間が11px広がっていた） */
  }
  /* --- S-57③ ご利用にあたって（余白をFigma実測へ・SPはSP周回で別途） --- */
  .c-page-title__subtitle {
    width: 722px; /* 実測 937:4220: w722（共通691だと折返し位置が1字ずれる） */
    line-height: 1.5; /* 実測: lh30 ÷ fs20（共通1.7） */
  }
  .p-kaiin__advice-inner {
    margin-top: 64px; /* 実測: 見出し下端1996 → お客様へのお願い2060（旧40） */
  }
  .p-kaiin__please-list {
    margin-top: 41px; /* 実測: タイトル下端2095 → ❶ 2136（旧24） */
  }
  .p-kaiin__block + .p-kaiin__block {
    margin-top: 93px; /* 実測: please下端2223 → 金券タイトル2316（旧48） */
  }
  .p-kaiin__block-lead {
    margin-top: 32px; /* 実測: タイトル下端2351 → リード2383（旧24） */
    line-height: 1.45; /* 実測 937:4171: lh26.1 ÷ fs18（基底1.7のままだと後続が+5ずれる） */
  }
  .p-kaiin__flow {
    margin-top: 32px; /* 実測: リード下端2409 → チップ2441（旧24） */
  }
  .p-kaiin__flow-break {
    display: none; /* SP専用の改行要素（SP周回 8/27） */
  }
  .p-kaiin__note-list {
    margin-top: 49px; /* 実測: チップ下端2480 → 注記2529（旧24） */
  }
  .p-kaiin__note {
    line-height: 1.45; /* 実測 937:4167: lh23.2 ÷ fs16（基底1.7） */
  }
  .p-kaiin__note + .p-kaiin__note {
    margin-top: 5px; /* 実測: 行送り28＝箱23.2＋5 */
  }
}
/* ==========================================================================
   PC専用（1440px〜）＝Figma実数値に着地させる
   ========================================================================== */
@media (min-width: 1440px) {
  .p-kaiin__hero {
    margin-top: 60px; /* 実測: FV下端 -> 帯写真 y646 */
  }
  .p-kaiin__benefits {
    margin-top: 100px; /* 実測: 帯写真下端1054 -> 特典 y1154 */
  }
  .p-kaiin__advice {
    margin-top: 100px; /* S-57 実測: 特典下端1717 -> advice y1817＝100（旧120＋旧・末尾罫線ぶんで計149に見えていた） */
    padding-block: 133px 175px; /* S-57 実測: 帯上端1817→見出し1950＝133／注記下端2608→帯下端2783＝175（旧100/100） */
  }
}
/* contact帯との余白＝実測0px（このページだけ帯が直結する。共通の既定 PC100/SP50 を打ち消す） */
.p-kaiin__advice + .c-contact-band {
  margin-top: 0;
}

/* S-58（8/26実見検出）: このページのcontact帯はFigmaに泡が無い
   （PC 937:4058の全ELLIPSE走査＝FV4個+見出し1個のみ・y2783以降ゼロを実測）
   ＝btob S-50・こだわり S-56 と同型の帯単位の出し分け。SP版contact帯はSP周回で照合 */
.c-contact-band__bubble {
  display: none;
}

/* ==========================================================================
   SP周回（2026-08-27）: Figma SP 1078:18 実測に合わせたSP限定修正。
   768px以下限定＝769px以上（タブレット・PC）には影響しない（PC22面承認済み）。
   fsはSP実測値（clamp下限のSP推定値を置換。S-16「実装統一を維持」型とは別）。
   ========================================================================== */
@media (max-width: 768px) {
  /* --- 帯写真: SPは390×150の別クロップ（1110:17 実測。PC比率1440/408のままだと114で浅い） --- */
  .p-kaiin__hero {
    margin-top: 50px; /* 実測: canvas下端274 → 帯324 */
  }
  .p-kaiin__hero-img {
    aspect-ratio: 390/150; /* 実測 1110:17 */
    object-fit: cover;
    object-position: 36% 40%; /* 実測: 元画像566×643のうち窓x63..453/y195..345 */
  }
  /* --- 特典5項目 --- */
  .p-kaiin__benefits {
    margin-top: 50px; /* 実測: 帯下端474 → 01行524 */
    padding: 0 19px; /* 実測: 行x19 */
  }
  .p-kaiin__benefit {
    padding: 20px 0; /* 実測: 線→見出し20／本文下端→線20（753→773→793） */
  }
  .p-kaiin__benefit-head {
    gap: 8px; /* 実測: 番号x19 w29 → タイトルx56 */
  }
  .p-kaiin__benefit-title {
    margin-right: -40px; /* 実測 1078:101: 箱w374＝内容+40（「チケッ/ト！」の1字落ち防止・折返し限界だけ広げる） */
    font-size: 20px; /* 実測 1078:95（clamp下限18はSP推定だった） */
    line-height: 1.6; /* 実測: 2行h64 ÷ fs20 ＝ lh32 */
  }
  .p-kaiin__benefit-text {
    margin-top: 20px; /* 実測: 見出し下端588 → 本文608 */
    padding-left: 37px; /* 実測: 本文x56 ＝ 行x19+37 */
    font-size: 18px; /* 実測 1078:96 */
    /* 🔒 lineHeightは1.6で統一する。Figma実測は 01/05=28.8(1.6)・02/03/04=26.064(1.448) と
       同一部品でプロパティが混在しており規則性が無い（CLAUDE.md §0②「Figma側が壊れている型」）。
       サービスカード本文 fs20×5/18×5 と同型＝実装は一貫した値を採る先例に合わせる。 */
    line-height: 1.6; /* 実測 1078:96(01/05): lh28.8 ÷ fs18 */
    /* 🔴 罠#41（際どい幅）: 04「クリーニング 全品が〜5％OFFでご利用いただけます。」は
       Figma 1078:113 で **2行**(w314/h52)。実装の折返し限界315pxでは最終行が
       36.8px（2文字）だけ溢れて**3行**になっていた（実測 300.2/301.3/36.8）。
       ∴ 箱・文字位置は動かさず、折返し限界だけ負のmargin-rightで広げる。 */
    margin-right: -14px;
  }
  /* --- ご利用にあたって --- */
  .p-kaiin__advice {
    margin-top: 90px; /* 実測: 05本文下端1628 → 帯1718 */
    padding: 49px 22px 75px; /* 実測: 帯→見出し49.5／注記下端2611.5→帯下端2687 */
  }
  .p-kaiin__advice-inner {
    margin-top: 70px; /* 実測: 見出し下端1802.5 → お願いtitle 1872.5 */
  }
  .p-kaiin__please-list {
    margin-top: 20px; /* 実測: title下端1901.5 → ❶1921.5 */
  }
  .p-kaiin__please {
    gap: 6px; /* 実測: ❶x18 w24 → 本文x48 */
    font-size: 18px; /* 実測 1078:… 本文18 */
  }
  .p-kaiin__please + .p-kaiin__please {
    margin-top: 20px; /* 実測: ❶下端1999.5 → ❷2019.5 */
  }
  .p-kaiin__please-num {
    font-size: 24px; /* 実測: fs24（clamp下限20はSP推定だった） */
  }
  .p-kaiin__block + .p-kaiin__block {
    margin-top: 50px; /* 実測: ❷本文下端2103.5 → 金券title2153.5 */
  }
  .p-kaiin__block-lead {
    margin-top: 20px; /* 実測: title下端2182.5 → 説明2202.5 */
    font-size: 18px; /* 実測 1078:… fs18 */
  }
  .p-kaiin__note {
    font-size: 16px; /* 実測: 注記fs16 */
  }
  /* 計算の流れ: SPは「定価−値引券−割引」1段目＋「＝合計」2段目（1078実測 y2309/2365）
     ＝flow-breakで強制改行し、チップ余白を詰めて1段目を1行に収める */
  /* 実測 1078:149/151/153: 行1は x20 w88 / x140 w106 / x278 w88 ＝ チップ間32px。
     この32pxに演算子「−」が入る（幅は文字なり）＝ flexのgapは左右で 32px を分け合う。
     行間は 2360.5-(2304.5+36) = 20px。 */
  .p-kaiin__flow {
    /* 🔴 罠#41と同型（際どい幅）: Figmaのチップ間32pxは「演算子＋左右gap」の合計。
       Figma基準なら gap=(32-13.7)/2=9.15 だが、実装のチップ合計はブラウザの字送りで
       287.7px（Figma282より+5.7）ある。gap9では行幅351.1>枠346で「会員割引」が2段目へ落ちた。
       ∴ 空き58.3px（片側29.2）から演算子13.7を引いた 7.7 以下を採る。 */
    gap: 20px 7px;
  }
  /* 🔴 実測(2026-08-28) 1078:149/151/153/158: チップ枠は 88/106/88/124 × h36・fs18。
     clamp下限15はSP推定値だった（枠が81.7/97.3/81.7/112.5 × h31.8 に縮んでいた）。
     枠幅はfs18＋左右padding10で 88.0/105.5/88.0/123.6 ＝ Figma実測と一致する。 */
  .p-kaiin__flow-chip {
    /* 実測 1078:149: 枠88 に対し文字72 ＝ 左右8px。h36 は 5px+26+5。 */
    padding: 5px 8px;
    font-size: 18px;
  }
  .p-kaiin__flow-break {
    flex-basis: 100%;
  }
  /* --- contact帯: 帯下端2687にcontactが密着（gap 0） --- */
  .p-kaiin .c-contact-band {
    margin-top: 0;
  }
}
/* SP行間＝Figma SP実測1.45（全数照合 2026-08-28・_SP_AUDIT_CLASSIFY_20260828.md §5）。
   ⚠️ p-kaiin__benefit-text は🔒1.6ロック（Figma側1.6/1.448混在→実装1.6統一の裁定）＝ここに含めない */
@media (max-width: 768px) {
  .p-kaiin__please,
  .p-kaiin__note,
  .p-kaiin__block-lead {
    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-kaiin__heading {
    gap: 10px;
  }
  .p-kaiin__heading-bubble {
    width: 29px;
    height: 29px;
  }
}