@charset "UTF-8";
/* ============================================================
   ロコモ・フレイル予防プログラム (page-locomo.php) 専用スタイル
   デザイン基準: PC 1440 / コンテンツ 1024, SP 375 / コンテンツ 343
   カラー: Base #F5F4EA #ECE6D7 / Main #3A1E08
           Accent #018E4A #F0810F #00ACDF
   ============================================================ */

.page-locomo {
  --lcm-main: #3a1e08;
  --lcm-green: #018e4a;
  --lcm-orange: #f0810f;
  --lcm-blue: #00acdf;
  --lcm-base: #f5f4ea;
  --lcm-beige: #ece6d7;
  --lcm-btn: #2da878;

  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  color: var(--lcm-main);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0;
}

.page-locomo img {
  display: block;
  max-width: 100%;
}

.page-locomo .lcm-container {
  width: 1024px;
  max-width: 100%;
  margin-inline: auto;
}

.page-locomo .lcm-sp-block { display: none; }

/* SPだけで効かせる改行 */
.page-locomo .lcm-sp-br { display: none; }

/* ============================================================
   FV
   ============================================================ */
.page-locomo .lcm-fv {
  position: relative;
  background-color: #fff;
  /* 文字サイズ・位置をヒーロー幅からの比例で出すためのコンテナ */
  container-type: inline-size;

  /* カンプ比に対する文字の倍率（PCのみ効く。SPは固定px指定） */
  --fv-text: 0.85;
  /* 左上にかけての白グラデーションの濃さ（0〜1） */
  --fv-veil: 0.14;

  /* 共通ヘッダーの高さぶん引き上げてロゴ・住所をヒーローに重ねる */
  margin-top: -60px;
}

.page-locomo .lcm-fv__photo {
  width: 100%;
  /* 写真・グラデーション・あしらいが1枚に焼き込まれた画像なので、
     縦にトリミングすると人物の頭やあしらいが欠ける。原寸比のまま表示する。 */
  aspect-ratio: 2880 / 1736;
  overflow: hidden;
}

.page-locomo .lcm-fv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左上にかけての白い半透明グラデーション。
   --fv-veil が左上の濃さ（0で無効）。ロゴと見出しの視認性を上げる。 */
.page-locomo .lcm-fv__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 左上を起点に放射状。右上（男性の顔）まで届かないようにしている */
  background: radial-gradient(115% 85% at 0% 0%,
    rgba(255, 255, 255, var(--fv-veil)) 0%,
    rgba(255, 255, 255, calc(var(--fv-veil) * 0.5)) 32%,
    rgba(255, 255, 255, 0) 66%);
}

.page-locomo .lcm-fv__inner {
  position: absolute;
  /* カンプ: text-block y=265 / x=80（868基準） */
  top: calc(100cqw * 265 / 1440);
  left: calc(100cqw * 80 / 1440);
  z-index: 2;
}

.page-locomo .lcm-fv__catch {
  margin: 0;
  /* カンプ実測: 1行目89px / 予防119px / プログラム95px、行送り131.5px */
  font-size: calc(100cqw * 89 / 1440 * var(--fv-text));
  font-weight: 700;
  line-height: calc(100cqw * 131.5 / 1440 * var(--fv-text));
  letter-spacing: 0;
  color: var(--lcm-green);
  /* 写真の上でも読めるよう白い縁取り */
  -webkit-text-stroke: 0.1em #fff;
  paint-order: stroke fill;
}

.page-locomo .lcm-fv__catch-line {
  display: block;
  /* 大きい文字が行送りを押し広げないよう固定 */
  line-height: calc(100cqw * 131.5 / 1440 * var(--fv-text));
}

.page-locomo .lcm-fv__catch-accent {
  font-size: calc(100cqw * 119 / 1440 * var(--fv-text));
  line-height: inherit;
  color: var(--lcm-orange);
}

.page-locomo .lcm-fv__catch-prog {
  font-size: calc(100cqw * 95 / 1440 * var(--fv-text));
  line-height: inherit;
}

.page-locomo .lcm-fv__sub {
  margin: calc(100cqw * 31 / 1440) 0 0;
  /* カンプ実測: 行送り80px / 字送り約52px */
  font-size: calc(100cqw * 52 / 1440 * var(--fv-text));
  font-weight: 700;
  line-height: calc(100cqw * 80 / 1440 * var(--fv-text));
  letter-spacing: 0;
  color: var(--lcm-main);
  -webkit-text-stroke: 0.1em #fff;
  paint-order: stroke fill;
}

.page-locomo .lcm-fv__sub span { display: block; }

/* ============================================================
   本文ラッパー（クリーム背景）
   ============================================================ */
.page-locomo .lcm-body {
  background-color: var(--lcm-base);
  /* カンプ: wrapper 1002→3622.75、中身 Frame625546 は y=1102（上下 100px） */
  padding: 100px 0;
}

/* セクション間は一律 60px */
.page-locomo .lcm-body > section + section { margin-top: 60px; }

/* ============================================================
   共通: CTAボタン
   ============================================================ */
.page-locomo .lcm-btn {
  position: relative;
  display: flex;
  align-items: center;
  /* カンプ: 320 x 64。ラベルは中央寄せではなく左から24px */
  justify-content: flex-start;
  width: 320px;
  height: 64px;
  padding-left: 24px;
  border-radius: 999px;
  background-color: var(--lcm-btn);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.page-locomo .lcm-btn:hover { opacity: 0.85; }

.page-locomo .lcm-btn__label {
  /* カンプ実測: ラベル幅232px */
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.page-locomo .lcm-btn__arrow {
  position: absolute;
  top: 50%;
  /* カンプ: arrow x=268（ボタン左端基準）→ 右端から 320-268-28=24 */
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #fff;
  transform: translateY(-50%);
}

.page-locomo .lcm-btn__arrow img { width: 16px; height: 9px; }

/* ============================================================
   健康維持と運動習慣
   ============================================================ */
.page-locomo .lcm-intro__chips {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-locomo .lcm-intro__chips li {
  display: flex;
  align-items: center;
  justify-content: center;
  /* カンプ: item 高さ46 */
  height: 46px;
  padding: 0 23px;
  border-radius: 999px;
  background-color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  white-space: nowrap;
}

.page-locomo .lcm-intro__lead {
  /* カンプ: chips(46) の下端から p-wrapper(y=88) まで 42px */
  margin: 42px 0 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0;
}

.page-locomo .lcm-intro__lead-sm,
.page-locomo .lcm-intro__lead-main { display: block; }

/* カンプ実測: 1行目は2行目より一段小さい（21px / 24px） */
.page-locomo .lcm-intro__lead-sm {
  font-size: 21px;
  line-height: 34px;
}

.page-locomo .lcm-intro__lead-main {
  font-size: 24px;
  line-height: 36px;
}

.page-locomo .lcm-intro__lead-accent { color: var(--lcm-blue); }

.page-locomo .lcm-intro__text {
  /* カンプ: lead下端(72) → 本文(88) */
  margin: 16px 0 0;
  text-align: center;
  /* カンプ実測: 字送り約17px / 行送り29px */
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
}

.page-locomo .lcm-intro__note {
  /* カンプ: 本文下端(146) → 注記(162) */
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.54;
}

/* ============================================================
   こんな方におすすめ
   ============================================================ */
.page-locomo .lcm-recommend__card {
  display: flex;
  align-items: center;
  /* カンプ: 1024 x 322。見出し列とリストはどちらも上下中央 */
  min-height: 322px;
  border-radius: 20px;
  background-color: #fff;
}

.page-locomo .lcm-recommend__title {
  /* カンプ: 見出しテキスト x=116 / リスト x=568 */
  flex: 0 0 568px;
  margin: 0;
  padding-left: 116px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.19;
  letter-spacing: 0;
}

.page-locomo .lcm-recommend__title-accent { color: var(--lcm-blue); }

.page-locomo .lcm-recommend__list {
  flex: 1 1 auto;
  margin: 0;
  /* カンプ: list ボックス 222 の内側で 1件目が y=12 から始まる */
  padding: 12px 0 0;
  list-style: none;
}

.page-locomo .lcm-recommend__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  /* カンプ: item 高さ28（3番目だけ42）・間隔14 */
  min-height: 28px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

/* カンプで3番目だけ item 高さが 42 */
.page-locomo .lcm-recommend__list li:nth-child(3) { min-height: 42px; }

.page-locomo .lcm-recommend__list li + li { margin-top: 14px; }

.page-locomo .lcm-recommend__check {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
}

/* ============================================================
   3つのプログラム
   ============================================================ */
.page-locomo .lcm-program__head {
  /* カンプ: Program y=712 の中で title y=60 */
  margin: 0 0 44px;
  padding-top: 60px;
  text-align: center;
}

.page-locomo .lcm-program__label {
  margin: 0;
  font-family: var(--font-english, "Poppins", sans-serif);
  /* カンプ実測: 幅71px。字間は詰めない */
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--lcm-blue);
}

.page-locomo .lcm-program__title {
  margin: 8px 0 0;
  /* カンプ実測: 幅258px */
  font-size: 34px;
  font-weight: 700;
  line-height: 1.59;
  letter-spacing: 0;
}

.page-locomo .lcm-program__cards {
  display: grid;
  /* カンプ: card 324 / gap 26 */
  grid-template-columns: repeat(3, 324px);
  gap: 26px;
  justify-content: space-between;
}

.page-locomo .lcm-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
}

.page-locomo .lcm-card__image {
  /* カンプ: 324 x 257.2 */
  aspect-ratio: 324 / 257.2;
  overflow: hidden;
}

.page-locomo .lcm-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-locomo .lcm-card__inner {
  /* カンプ: inner 350。説明文の行数が違っても料金表は下端揃えになる */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 350px;
  padding: 24px 22px 39px;
}

.page-locomo .lcm-card__badge {
  /* inner が flex column なので、伸びないよう左寄せで固定する */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* カンプ: 51 x 27 */
  min-width: 51px;
  height: 27px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  background-color: var(--lcm-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}

.page-locomo .lcm-card__title {
  /* カンプ: バッチ下端(51) → text(59) */
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.page-locomo .lcm-card__desc {
  /* カンプ: title下端(89) → desc(100)。字送り15px・行送り25pxで折返し位置が一致する */
  margin: 11px 0 11px;
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
}

.page-locomo .lcm-card__price {
  /* カンプ: box上端の破線がそのまま境界線。下端揃えで配置する */
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 2px dashed #e5ddc5;
}

.page-locomo .lcm-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.page-locomo .lcm-card__price-row dt,
.page-locomo .lcm-card__price-row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.page-locomo .lcm-card__price-row--single {
  /* カンプ: box内 y=16 から高さ28 */
  min-height: 28px;
  align-items: center;
}

.page-locomo .lcm-card__price-row--single dt,
.page-locomo .lcm-card__price-row--single dd {
  font-size: 16px;
  font-weight: 700;
  color: var(--lcm-green);
}

/* カンプ: 回数券の行は高さ21・間隔7 */
.page-locomo .lcm-card__price-row + .lcm-card__price-row { margin-top: 7px; }

.page-locomo .lcm-card__price-row:not(.lcm-card__price-row--single) {
  min-height: 21px;
  align-items: center;
}

.page-locomo .lcm-card__price-row:not(.lcm-card__price-row--single) dt,
.page-locomo .lcm-card__price-row:not(.lcm-card__price-row--single) dd {
  line-height: 21px;
}

/* ============================================================
   CTA セクション
   ============================================================ */
.page-locomo .lcm-cta .lcm-container { text-align: center; }

.page-locomo .lcm-cta__title {
  margin: 0;
  /* カンプ実測: 幅461px */
  font-size: 34px;
  font-weight: 700;
  line-height: 1.59;
  letter-spacing: 0;
}

/* 2つ目のCTAの見出しはカンプでは一段小さい（幅456px / 15文字） */
.page-locomo .lcm-cta--last .lcm-cta__title { font-size: 32px; }

.page-locomo .lcm-cta__title-accent { color: var(--lcm-blue); }

.page-locomo .lcm-cta__text {
  /* カンプ: title下端(51) → text(65) */
  margin: 14px 0 0;
  /* カンプ実測: 字送り約17px / 行送り29px */
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
}

.page-locomo .lcm-cta__sub {
  /* カンプ: title下端(46) → sub(58) */
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

.page-locomo .lcm-cta__btn-wrap {
  /* カンプ: text下端(123) → btn(137) */
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.page-locomo .lcm-cta--last .lcm-cta__btn-wrap {
  /* カンプ: sub下端(83) → btn(95) */
  margin-top: 12px;
}

/* ============================================================
   ご利用にあたって
   ============================================================ */
.page-locomo .lcm-notice__box {
  /* カンプ: 1024 x 370（40 + 29 + 24 + 189 + 24 + 24 + 40） */
  padding: 40px 137px;
  border-radius: 12px;
  background-color: var(--lcm-beige);
}

.page-locomo .lcm-notice__title {
  margin: 0;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0;
}

.page-locomo .lcm-notice__text {
  /* カンプ: title下端(69) → text(93)。7行 x 27px = 189 */
  margin: 24px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
}

.page-locomo .lcm-notice__note {
  /* カンプ: text下端(282) → note(306) */
  margin: 24px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
}

/* ============================================================
   SP (〜768px)  カンプ基準: 375 / コンテンツ 343
   ============================================================ */
@media (max-width: 768px) {
  .page-locomo .lcm-pc-block { display: none; }
  .page-locomo .lcm-sp-block { display: block; }

  .page-locomo .lcm-container {
    width: 100%;
    padding: 0 16px;
  }

  /* ---- FV ---- */
  .page-locomo .lcm-fv {
    /* SPヘッダー(上10 + 60) ＋ main上余白ぶん引き上げ、ロゴとMENUを写真に重ねる */
    margin-top: -95px;
    /* SPのヒーロー画像は上側の白フェードが焼き込み済みなので追加のベールは切る */
    --fv-veil: 0;
  }

  .page-locomo .lcm-fv__photo {
    /* カンプ: 375 x 399。SPは画面高さで縮めずカンプ比のまま */
    height: auto;
    aspect-ratio: 375 / 399;
  }

  .page-locomo .lcm-fv__inner {
    /* カンプ: Frame625544 x=37 / y=200 */
    top: 200px;
    left: 37px;
    right: 16px;
  }

  /* カンプ実測: ロコモ・フレイル36px / 予防46px / プログラム38px、行送り54px */
  .page-locomo .lcm-fv__catch {
    font-size: 36px;
    line-height: 54px;
  }

  .page-locomo .lcm-fv__catch-line { line-height: 54px; }

  .page-locomo .lcm-fv__catch-accent { font-size: 46px; }

  .page-locomo .lcm-fv__catch-prog { font-size: 38px; }

  .page-locomo .lcm-fv__sub {
    /* カンプ: 見出し下端(108) → sub(112) */
    margin-top: 4px;
    font-size: 18px;
    line-height: 30px;
  }

  /* ---- 本文ラッパー ---- */
  .page-locomo .lcm-body {
    /* カンプ: FV(399) → 初回セクション(459) = 60 / 末尾 4455.1 → 共通パーツ 4525.1 = 70 */
    padding: 60px 0 70px;
  }

  /* ---- 健康維持と運動習慣 ---- */
  .page-locomo .lcm-intro__chips {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .page-locomo .lcm-intro__chips li {
    width: 302px;
    max-width: 100%;
    padding: 0 16px;
    font-size: 16px;
    white-space: normal;
  }

  .page-locomo .lcm-intro__lead {
    /* カンプ: list下端(165.6) → p-wrapper(189.6) */
    margin-top: 24px;
  }

  .page-locomo .lcm-intro__lead-sm {
    font-size: 21px;
    line-height: 34px;
  }

  .page-locomo .lcm-intro__lead-main {
    /* カンプは「…づくりを」で改行される。幅を絞って折返し位置を合わせる */
    display: block;
    max-width: 330px;
    margin-inline: auto;
    font-size: 24px;
    line-height: 34px;
  }

  .page-locomo .lcm-intro__text {
    /* カンプ: lead下端(102) → Container(118) */
    margin-top: 16px;
    text-align: left;
    font-size: 14px;
    line-height: 1.67;
  }

  .page-locomo .lcm-intro__note {
    /* カンプ: text下端(100) → note(118) */
    margin-top: 18px;
    text-align: left;
    font-size: 13px;
    line-height: 1.54;
  }

  /* SPは改行位置をブラウザに任せる */
  .page-locomo .lcm-intro__text br { display: none; }

  /* ---- こんな方におすすめ ---- */
  .page-locomo .lcm-recommend__card {
    display: block;
    /* カンプ: 343 x 371.8（49.8 + 38 + 16 + 222 + 46） */
    min-height: 0;
    padding: 49.8px 0 46px;
    border-radius: 16px;
  }

  .page-locomo .lcm-recommend__title {
    width: auto;
    padding-left: 0;
    text-align: center;
    font-size: 24px;
    line-height: 1.58;
  }

  .page-locomo .lcm-recommend__list {
    /* カンプ: 見出し下端(87.8) → Container(103.8)。Container は x=40 / 幅275 */
    margin-top: 16px;
    padding: 12px 28px 0 40px;
  }

  .page-locomo .lcm-recommend__list li { font-size: 16px; }

  /* ---- 3つのプログラム ---- */
  .page-locomo .lcm-program__head {
    /* カンプ: Program先頭から title y=0、下に card-wrapper y=113.8（title 69.8） */
    margin-bottom: 44px;
    padding-top: 0;
  }

  .page-locomo .lcm-program__title {
    font-size: 24px;
    line-height: 1.58;
  }

  .page-locomo .lcm-program__cards {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .page-locomo .lcm-card__image {
    /* カンプ: 343 x 257.2 */
    aspect-ratio: 343 / 257.2;
  }

  .page-locomo .lcm-card__inner {
    /* カンプ: inner 309（24 + 27 + 8 + 30 + 8 + 50 + 8 + 128 + 26） */
    min-height: 309px;
    padding: 24px 22px 26px;
  }

  .page-locomo .lcm-card__desc {
    /* カンプ: title下端(89) → desc(97) */
    margin: 8px 0 0;
  }

  .page-locomo .lcm-card__price {
    /* カンプ: desc下端(147) → box(155)。SPは1列なので下端揃えにしない */
    margin: 8px 0 0;
  }

  /* ---- CTA ---- */
  .page-locomo .lcm-cta__title {
    /* カンプは「無理なく / 身体を動かす習慣を。」の2行。幅を絞って折返す */
    max-width: 250px;
    margin-inline: auto;
    font-size: 24px;
    line-height: 38px;
  }

  .page-locomo .lcm-cta--last .lcm-cta__title { max-width: none; }

  .page-locomo .lcm-cta__text {
    /* カンプ: title下端(76) → text(92)。中央寄せで4行（改行はそのまま生かす） */
    margin: 16px auto 0;
    max-width: 322px;
    font-size: 14px;
    line-height: 25px;
  }

  .page-locomo .lcm-sp-br { display: inline; }

  .page-locomo .lcm-cta__sub {
    /* カンプ: title下端(32) → sub(40) */
    margin-top: 8px;
    font-size: 14px;
  }

  .page-locomo .lcm-cta__btn-wrap {
    /* カンプ: text下端(192) → btn(208) */
    margin-top: 16px;
  }

  .page-locomo .lcm-cta--last .lcm-cta__title { font-size: 20px; line-height: 1.6; }

  .page-locomo .lcm-cta--last .lcm-cta__btn-wrap {
    /* カンプ: sub下端(65) → btn(73) */
    margin-top: 8px;
  }

  .page-locomo .lcm-btn {
    /* カンプ: cta-02 279 x 54 */
    width: 279px;
    height: 54px;
    padding-left: 20px;
  }

  .page-locomo .lcm-btn__label { font-size: 16px; }

  .page-locomo .lcm-btn__arrow {
    right: 20px;
    width: 24px;
    height: 24px;
  }

  .page-locomo .lcm-btn__arrow img { width: 14px; height: 8px; }

  /* ---- ご利用にあたって ---- */
  .page-locomo .lcm-notice__box {
    /* カンプ: 343 x 584.8 */
    padding: 39.8px 22px 36px;
    border-radius: 12px;
  }

  .page-locomo .lcm-notice__title {
    font-size: 19px;
    line-height: 1.53;
  }

  .page-locomo .lcm-notice__text {
    /* カンプ: title下端(68.8) → text(84.8) */
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.67;
  }

  .page-locomo .lcm-notice__note {
    /* カンプ: text下端(484.8) → note(500.8) */
    margin-top: 16px;
    text-align: left;
    font-size: 13px;
    line-height: 1.85;
  }
}

/* ============================================================
   ご自由診療のご案内（共通パーツ）
   lcm-body の中に置くので、パーツ側の余白と背景は打ち消す
   ============================================================ */
.page-locomo .lcm-body .section-selfpay-notice {
  padding: 0;
  background-color: transparent;
}

@media (max-width: 768px) {
  /* SPはページ共通のコンテナ幅(343)に合わせる */
  .page-locomo .lcm-body .section-selfpay-notice {
    padding: 0 16px;
  }
}