/* /sleep/HMS（Health Pro Academy）固有（実測= capture/HMS-ex*.json / HMS-cards.json）
   特徴: セクション本文はほぼ固定px・スケールするのはヒーロー(1180センター)とAboutイラスト(50vw系)とOFカルーセルのみ */

/* グラデーション（このページ固有の停止位置） */
main.grad-hpa {
  background: linear-gradient(180deg, #000 9.58%, #2137aa 44.5%, #fff 70.76%, #fff3b5 82%, #ffd058 100%);
}

/* ===== ヒーロー（1180幅センターコンテナ・最小マージン50） ===== */
.hpa-hero { max-width: 1180px; margin: 0 auto; position: relative; height: 640px; } /* live実測: イントロ開始y=640固定（1000/1440/1920共通） */
@media (max-width: 1280px) { .hpa-hero { margin: 0 50px; max-width: none; } }
.hpa-logo { position: absolute; left: 0; top: 0; display: block; }
.hpa-crumb { padding-top: 129px; font-size: 20px; line-height: 28px; color: rgb(176, 176, 176); display: flex; white-space: nowrap; }
.hpa-crumb a, .hpa-crumb span, .hpa-crumb em { flex: none; font-style: normal; }
.hpa-crumb span { white-space: pre; }
.hpa-crumb-link { text-decoration: underline; text-underline-offset: 3px; }
.hpa-crumb em { color: #fff; }
.hpa-label { font-size: 30px; font-weight: 400; letter-spacing: -1.2px; line-height: 60px; color: #fff; margin-top: 60px; }
.hpa-title {
  font-family: Roboto, sans-serif; font-size: 7vw; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.1; color: #fff; margin-top: 20px;
}
.hpa-ver {
  font-family: Roboto, sans-serif; font-size: 2vw; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.1; color: #fff; margin-top: 20px;
}
.hpa-tagline { font-size: 30px; font-weight: 400; letter-spacing: -1.2px; line-height: 60px; color: #fff; margin-top: 19px; }

/* ===== イントロ（左イラスト+右テキスト） ===== */
.hpa-intro { position: relative; }
.hpa-intro-illust {
  position: absolute; right: calc(50vw + 64px); top: 6px;
  width: min(566px, 39vw); height: auto;
}
.hpa-intro-col { margin-left: calc(50vw + 23px); width: 557px; }
.hpa-intro-col h3 { font-size: 42px; font-weight: 600; letter-spacing: -1.68px; line-height: 1.4; color: #fff; }
.hpa-intro-sub { font-size: 25px; font-weight: 400; letter-spacing: 1.25px; line-height: 25px; color: #fff; margin-top: 19px; }
.hpa-intro-col p:not(.hpa-intro-sub):not(.hpa-intro-sub-sp):not(.hpa-intro-title-sp) { font-size: 18px; line-height: 36px; color: #fff; margin-top: 20px; }
.hpa-intro-col p:not(.hpa-intro-sub):not(.hpa-intro-sub-sp):not(.hpa-intro-title-sp) + p:not(.hpa-intro-sub) { margin-top: 38px; }

/* ===== About Service（行=固定高405・イラストは行中央にabsolute） ===== */
.hpa-abs { margin-top: 123px; }
.hpa-abs > .sec-label, .hpa-abs-title { margin-left: 73px; }
.hpa-abs-title { font-size: 130px; line-height: 130px; }
.hpa-row { position: relative; height: 405px; margin: 0 73px; }
.hpa-r1 { margin-top: 33px; }
.hpa-num {
  font-family: Roboto, sans-serif; font-size: 130px; font-weight: 700;
  letter-spacing: -0.05em; line-height: 130px; color: rgba(255, 255, 255, .3);
}
.hpa-rttl { font-size: 36px; font-weight: 700; letter-spacing: 1.8px; line-height: 50.4px; color: #fff; margin: -50px 0 0 30px; }
.hpa-rbody { font-size: 16px; line-height: 22.4px; color: #fff; margin-top: 10px; }
.hpa-rimg-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: calc(50vw - 73px); height: auto; }
.hpa-rimg-left { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.hpa-r2 .hpa-num { font-size: 100px; letter-spacing: -5px; line-height: 100px; margin-left: 536px; }
.hpa-r2 .hpa-rttl { margin: -50px 0 0 566px; }
.hpa-r2 .hpa-rbody { margin-left: 536px; width: 598px; }
.hpa-star { display: block; margin: 0 auto; }

/* ===== CTA帯1（二重線） ===== */
.hpa-band {
  position: relative; height: 289px; margin-top: 72px;
  border-top: 1px solid #444; border-bottom: 1px solid #444;
}
.hpa-band-inner {
  position: relative; height: calc(100% - 4px); margin: 2px 0;
  border-top: 1px solid #444; border-bottom: 1px solid #444;
}
.hpa-band-lead {
  position: absolute; left: calc(50vw - 295px); top: 67px;
  font-size: 32px; font-weight: 700; line-height: 44.8px; color: #333;
}
.hpa-band-pill { position: absolute; left: calc(50vw - 210px); top: 132px; display: block; }
.hpa-band-sheep { position: absolute; left: calc(50vw + 167px); top: 50px; }

/* ===== Other Features カルーセル ===== */
.hpa-of { margin-top: 141px; }
.hpa-of-label, .hpa-of-title { margin-left: 126px; color: #222 !important; }
.hpa-of-title { font-size: 130px; line-height: 130px; }
.of-carousel { margin-top: 32px; }
.of-card {
  flex: none; width: 872px; height: 462px; margin-right: calc(100vw - 1032px);
  background: #fff; border-radius: 30px;
  display: flex; align-items: center;
}
.of-card > img { flex: none; width: 436px; height: 456px; }
.of-card-col { margin-left: 20px; width: 396px; }
.of-ttl { font-size: 32px; font-weight: 700; line-height: 44.8px; color: #222; }
.of-body { font-size: 15px; line-height: 21px; color: #333; }

/* ===== Pricing ===== */
.hpa-pr { position: relative; margin-top: 108px; }
.hpa-pr-label, .hpa-pr-title { margin-left: 126px; color: #222 !important; }
.hpa-pr-title { font-size: 130px; line-height: 130px; }
.hpa-pr-star { position: absolute; left: 505px; top: -4px; }
.hpa-pr-body { margin-left: 126px; margin-top: 95px; }
.hpa-pr-h { font-size: 28px; font-weight: 900; line-height: 39.2px; color: #222; }
.hpa-pr-menu { font-size: 20px; font-weight: 900; line-height: 28px; color: #222; }
.hpa-pr-list { font-size: 18px; font-weight: 400; line-height: 25.2px; color: #222; margin-top: 10px; }
.hpa-pr-opt { font-size: 18px; font-weight: 400; line-height: 25.2px; color: #222; margin-top: 24px; }
.hpa-pr-opt strong { font-weight: 900; }

/* ===== CTA帯2（罫線なし） ===== */
.hpa-cta2 { position: relative; height: 285px; }
.hpa-cta2 .hpa-band-sheep { top: 90px; }
.hpa-cta2 .hpa-band-lead { top: 108px; }
.hpa-cta2 .hpa-band-pill { top: 172px; }

/* SP変形ヘッダー（PC非表示） */
.hpa-intro-label-sp, .hpa-intro-title-sp, .hpa-intro-sub-sp { display: none; }

/* ============================================================
   HMS SP/モバイル（SP=live実測 / モバイル=liveが崩れているためクリーン補間=意図的差異）
   ============================================================ */
@media (max-width: 840px) {
  .hpa-hero { margin: 0 25px; max-width: none; height: auto; }
  .hpa-logo { display: none; }
  .hpa-crumb { padding-top: 76px; }
  .hpa-label { margin-top: 0; }
  .hpa-title { margin-top: 49px; }
  .hpa-ver { margin-top: 38px; }
  .hpa-tagline { margin-top: 38px; }

  .hpa-intro { margin: 107px 98px 0; }
  .hpa-intro-illust { position: static; display: block; width: calc(45vw - 76px); margin-left: -15px; }
  .hpa-intro-col { margin-left: 0; width: 100%; }
  .hpa-intro-col h3, .hpa-intro-sub { display: none; }
  .hpa-intro-label-sp, .hpa-intro-title-sp, .hpa-intro-sub-sp { display: block; color: #fff; }
  .hpa-intro-title-sp { font-family: Roboto, sans-serif; font-weight: 700; letter-spacing: -0.04em; }
  .hpa-intro-sub-sp { font-weight: 500; margin-top: 3px; }
  .hpa-intro-col p:not(.hpa-intro-sub):not(.hpa-intro-sub-sp):not(.hpa-intro-title-sp) { margin-top: 16px; }

  .hpa-abs { margin-top: 48px; }
  .hpa-abs > .sec-label, .hpa-abs-title { margin-left: 25px; }
  .hpa-row { margin: 0 25px; }
  .hpa-r1 { margin-top: 40px; }
  .hpa-rbody { width: calc(50vw - 25px); margin-top: 0; }
  .hpa-rimg-right { width: calc(50vw - 25px); }
  .hpa-band { margin-top: 71px; }
  .hpa-of-label, .hpa-of-title, .hpa-pr-label, .hpa-pr-title { margin-left: 23px; }
  .of-carousel { margin-top: 30px; }
  .of-card > img { width: calc(21.4vw + 95px); height: auto; }
  .of-card { border-radius: 20px; }
  .of-card-col { flex: 1; width: auto; margin: 0 20px; }
  .hpa-pr-body { margin-left: 23px; }
  .hpa-cta2 .hpa-band-sheep { top: 96px; }
}

/* モバイル帯（541-840）: クリーン補間 */
@media (max-width: 840px) and (min-width: 541px) {
  .hpa-title, .hpa-ver { font-size: 13vw; }
  .hpa-intro-label-sp { font-size: 25px; letter-spacing: 1.25px; line-height: 25px; }
  .hpa-intro-title-sp { font-size: 13vw; line-height: 1; }
  .hpa-intro-sub-sp { font-size: 46px; font-weight: 600; letter-spacing: -1.84px; line-height: 1; }
  .hpa-intro-col p:not(.hpa-intro-sub):not(.hpa-intro-sub-sp):not(.hpa-intro-title-sp) { font-size: 18px; line-height: 36px; }
  .hpa-intro-col p:not(.hpa-intro-sub):not(.hpa-intro-sub-sp):not(.hpa-intro-title-sp) + p:not(.hpa-intro-sub) { margin-top: 38px; }
  .hpa-abs-title { font-size: 130px; line-height: 130px; }
  .hpa-rttl { font-size: 36px; line-height: 50.4px; }
  .hpa-rbody { font-size: 16px; line-height: 22.4px; }
  .hpa-r2 .hpa-num { margin-left: 310px; }
  .hpa-r2 .hpa-rttl { margin-left: 350px; }
  .hpa-r2 .hpa-rbody { margin-left: 310px; width: calc(50vw - 35px); }
  .hpa-rimg-left { width: calc(45vw); height: auto; }
  .hpa-of-title, .hpa-pr-title { font-size: 130px; line-height: 130px; }
  .of-card { width: calc(100vw - 210px); margin-right: 50px; height: 500px; }
  .hpa-pr-star { left: calc(50vw + 52px); top: -5px; }
  .hpa-pr-body { margin-top: 94px; }
  .hpa-cta2 { height: 500px; }
  .hpa-cta2 .hpa-band-lead { top: 114px; }
  .hpa-cta2 .hpa-band-pill { top: 178px; }
}

/* SP帯（≤540）: live実測 */
@media (max-width: 540px) {
  .hpa-crumb { font-size: 10px; line-height: 14px; }
  .hpa-label, .hpa-tagline { font-size: 11px; font-weight: 300; line-height: 22px; letter-spacing: -0.44px; }
  .hpa-title, .hpa-ver { font-size: 40px; line-height: 44px; letter-spacing: -1.6px; }
  .hpa-intro-label-sp { font-size: 10px; line-height: 10px; letter-spacing: 0.5px; }
  .hpa-intro-title-sp { font-size: 40px; line-height: 40px; margin-top: 3px; }
  .hpa-r3 { margin-top: 51px; }
  .hpa-of { margin-top: 101px; }
  .of-carousel { margin-top: -48px; }
  .hpa-pr { margin-top: 41px; }
  .hpa-intro-sub-sp { font-size: 20px; line-height: 20px; letter-spacing: -0.8px; }
  .hpa-intro-col p:not(.hpa-intro-sub):not(.hpa-intro-sub-sp):not(.hpa-intro-title-sp) { font-size: 12px; font-weight: 300; line-height: 24px; }
  .hpa-intro-col p:not(.hpa-intro-sub):not(.hpa-intro-sub-sp):not(.hpa-intro-title-sp) + p:not(.hpa-intro-sub) { margin-top: 20px; }
  .hpa-abs > .sec-label { font-size: 12px; line-height: 12px; }
  .hpa-abs-title { font-size: 40px; line-height: 40px; }
  .hpa-rttl { font-size: 20px; line-height: 28px; letter-spacing: 1px; }
  .hpa-rbody { font-size: 14px; line-height: 19.6px; }
  .hpa-r2 .hpa-num { margin-left: 185px; }
  .hpa-r2 .hpa-rttl { margin-left: 195px; }
  .hpa-r2 .hpa-rbody { margin-left: 185px; width: 295px; }
  .hpa-rimg-left { left: -49px; width: 214px; height: auto; }
  .hpa-band-lead { font-size: 15px; line-height: 21px; left: calc(50vw - 212px); top: 87px; }
  .hpa-band .hpa-band-pill { left: calc(50vw - 212px); top: 149px; }
  .hpa-band .hpa-band-pill img { width: 195px; height: 49px; }
  .hpa-band .hpa-band-sheep { left: calc(50vw - 12px); top: 81px; width: 204px; height: 123px; }
  .hpa-of-label, .hpa-pr-label { font-size: 12px; line-height: 12px; }
  .hpa-of-title, .hpa-pr-title { font-size: 40px; line-height: 40px; }
  .of-card { width: calc(100vw - 84px); margin-right: 20px; height: 620px; }
  .of-ttl { line-height: 44.8px; }
  .hpa-pr-star { left: 140px; top: -56px; }
  .hpa-pr-body { margin-top: 146px; }
  .hpa-cta2 { height: 663px; }
  .hpa-cta2 .hpa-band-lead { font-size: 15px; line-height: 21px; left: calc(50vw - 212px); top: 98px; }
  .hpa-cta2 .hpa-band-pill { left: calc(50vw - 212px); top: 160px; }
  .hpa-cta2 .hpa-band-pill img { width: 195px; height: 49px; }
  .hpa-cta2 .hpa-band-sheep { left: calc(50vw - 12px); top: 92px; width: 204px; height: 123px; }
}