@charset "UTF-8";
/* ==========================================================================
   出張整体ページ専用スタイル（p-homevisit-）
   共通部品（c-）は common.css 側を使い、ここにはこのページ固有のものだけを書く。
   カンプ: Figma winjeLDXMguhfDP4yN4FVL / node-id 1259-5039（PC 1440px・全高 6948px）
   ※ 施術案内（1259-9957）・当院について（1259-10777）・はじめての方へ（1259-10583）・
      ペルケア（1259-4519）・マタニティ（1259-4795）と同じ改訂版。
   帯の噛み合わせ: 白（POINT）→ 水色02（企業）→ 黄（一般）→ 水色03（往診）の順に
   次の帯が前の帯の上へ重なる（126px / 133px / 213px）。
   ========================================================================== */

/* ==========================================================================
   1. ページMV
      カンプ y142–847。白ボックス・キャッチ・写真・装飾円の位置は
      ペルケア／マタニティと完全に同じで、白ボックスの幅とキャッチの本数だけが違う。
   ========================================================================== */
.p-homevisit-mv {
  padding-top: 89px;
  padding-bottom: 72px;
}

/* 白ボックス（カンプ 312×125 @180,231）。見た目は共通部品 c-page-mv-head */
.p-homevisit-mv-head { width: 312px; }

/* リード文（カンプ 894×120 @273,655）
   キャッチが3本ぶんあるので c-page-mv-body の上余白はマタニティより浅い */
.p-homevisit-mv .c-page-mv-body { margin-top: 85px; }

/* カンプは1テキストノードで段落間が0（＝2段落が続けて組まれている） */
.p-homevisit-mv-lead {
  max-width: 894px;
  margin: 0 auto;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* 写真（カンプ 982×408 @458,176。右端 x=1440 で見切れるので右側の角丸は付けない） */
.p-homevisit-mv-photo {
  left: 31.81%;
  top: 34px;
  width: 68.19%;
  border-radius: var(--r-card) 0 0 var(--r-card);
}

/* 装飾円（カンプの絶対y － 142px）
   カンプ上で装飾円が写真より前面にあり、乗算で重なっている（ペルケア／マタニティと同じ） */
.p-homevisit-mv .c-deco-circle {
  z-index: 1;
  mix-blend-mode: multiply;
}

/* 右上の円は画面右端からの距離で置く。left: 1141px だと 1263px 未満の画面で
   画面外にはみ出し、横スクロールが発生してしまう（1440px時の位置は同じ） */
.p-homevisit-mv .c-deco-circle--cream { left: auto; right: 177px; top: -19px; width: 122px; height: 122px; }
.p-homevisit-mv .c-deco-circle--pink  { left: 400px;  top: 374px; width: 108px; height: 108px; }
.p-homevisit-mv .c-deco-circle--blue  { left: 349px;  top: 404px; width: 78px;  height: 78px; }

/* ==========================================================================
   2. POINT（あなたのニーズにお応えして伺います）
      カンプ y847–1874 の白帯（上2隅だけ 120px の角丸）。
      下端 126px 分は次の企業帯に隠れる。
   ========================================================================== */
.p-homevisit-point {
  position: relative;
  padding: 80px 0 286px;
  background: var(--c-white);
  border-radius: var(--r-band) var(--r-band) 0 0;
}

/* 見出し行はカンプ幅 946px（l-inner よりさらに 64px 内側。ペルケア／マタニティと同じ） */
.p-homevisit-point-inner {
  width: calc(100% - 32px);
  max-width: 946px;
  margin-left: auto;
  margin-right: auto;
}

/* 3枚のカード（カンプ 338px×3・間隔32px＝1080px @179,1147）
   カラムの左右 padding 16px ぶんを外側に足した幅にすると、
   カードの外形がちょうど 1080px 幅に収まる */
.p-homevisit-cards {
  width: calc(100% - 32px);
  max-width: 1112px;
  margin: 54px auto 0;
}

/* Bootstrap の .no-gutters > [class*="col-"] より詳細度を上げて左右 padding を戻す */
.p-homevisit-cards.no-gutters > .p-homevisit-card-col {
  display: flex;
  padding: 0 16px;
}

/* カードは左上だけ角が立っている（カンプどおり） */
.p-homevisit-card {
  width: 100%;
  padding: 40px;
  border-radius: 0 var(--r-card) var(--r-card) var(--r-card);
  box-shadow: var(--shadow-hard);
}

.p-homevisit-card--blue02 { background: var(--c-blue02); }
.p-homevisit-card--yellow { background: var(--c-yellow); }
.p-homevisit-card--blue03 { background: var(--c-blue03); }

/* 写真（カンプ 258×154） */
.p-homevisit-card-photo {
  width: 100%;
  height: 154px;
  border-radius: var(--r-card);
  object-fit: cover;
}

.p-homevisit-card-title {
  margin-top: 32px;
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-align: center;
  /* 字送りが最後の1文字の後ろにも入るぶんを字下げで相殺して光学的に中央へ */
  text-indent: 0.2em;
}

.p-homevisit-card-text {
  margin-top: 16px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.2em;
}

/* 下向きの三角（カンプ 41×24）。装飾なので要素を増やさず CSS で描く */
.p-homevisit-card--arrow::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 16px auto 0;
  border-left: 20.5px solid transparent;
  border-right: 20.5px solid transparent;
  border-top: 24px solid var(--c-navy);
}

/* ==========================================================================
   3. 帯（企業／一般／往診）で共通の作り
   ========================================================================== */
.p-homevisit-company,
.p-homevisit-public,
.p-homevisit-housecall {
  position: relative;
}

/* 改訂版カンプは欧文と和文サブの間に余白も点線も無い */
.p-homevisit-company .c-sec-title-en,
.p-homevisit-public .c-sec-title-en,
.p-homevisit-housecall .c-sec-title-en { line-height: 1.05; }

.p-homevisit-company .c-sec-title-ja,
.p-homevisit-public .c-sec-title-ja,
.p-homevisit-housecall .c-sec-title-ja { margin-top: 0; }

/* 写真＋テキストの2カラム（カンプ 1080px の内側 64px ＝ 952px）
   写真 518px ＋ 32px ＋ テキスト 402px */
.p-homevisit-intro {
  width: calc(100% - 32px);
  max-width: 952px;
  margin: 40px auto 0;
}

.p-homevisit-intro-photo { width: 100%; }

.p-homevisit-intro-title {
  font-family: var(--font-ja);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.2em;
}

.p-homevisit-intro-body > p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.2em;
}

/* 見出しと本文の間 32px・段落間 8px */
.p-homevisit-intro-title + p { margin-top: 32px; }
.p-homevisit-intro-body > p + p { margin-top: 8px; }

/* 白パネル（カンプ 1080px・角丸16px・上下 padding は上80px／下48px） */
.p-homevisit-menu-panel {
  width: calc(100% - 32px);
  max-width: var(--inner);
  margin: 64px auto 0;
  padding: 80px 48px 48px;
  background: var(--c-white);
  border-radius: var(--r-card);
}

/* プラン／メニューの2カラム（カンプ 476px×2・間隔32px＝984px） */
.p-homevisit-plans {
  margin-top: 32px;
  margin-left: -16px;
  margin-right: -16px;
}

/* 同上。Bootstrap の .no-gutters より詳細度を上げる */
.p-homevisit-plans.no-gutters > .p-homevisit-plan-col {
  display: flex;
  padding: 0 16px;
}

.p-homevisit-plan {
  width: 100%;
  padding: 48px;
  background: var(--c-blue02);
  border-radius: var(--r-card);
}

/* カンプはタイトルの箱の高さが 76px 固定（32px×1.5 ＋ 上下14px） */
.p-homevisit-plan-title {
  padding: 14px 0;
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-align: center;
  text-indent: 0.2em;
}

/* 「3時間コース」の水色pill */
.p-homevisit-plan-tag {
  display: table;
  margin: 0 auto;
  padding: 4px 16px;
  background: var(--c-blue01);
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
}

.p-homevisit-plan-note {
  margin-top: 24px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-homevisit-plan-ex {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

/* 金額行（1px罫の下に 20px ＋ 32px ＋ 20px を1段落で組む） */
.p-homevisit-plan-price {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--c-navy);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.p-homevisit-plan-num { font-size: 2rem; }

/* 料金の一覧（カンプの行間 8px） */
.p-homevisit-prices { margin-top: 24px; }

.p-homevisit-price,
.p-homevisit-price-name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-homevisit-price + .p-homevisit-price { margin-top: 8px; }

.p-homevisit-price-name--gap { margin-top: 8px; }

.p-homevisit-price-num { font-size: 2rem; }
.p-homevisit-price-unit { font-size: 1.25rem; }

/* パネル下部の注記（企業帯は24px／一般帯は20px） */
.p-homevisit-menu-lead {
  margin-top: 32px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.p-homevisit-menu-lead--sm { font-size: 1.25rem; }

/* ピンクの帯（カンプは角丸なしでパネル内寸いっぱい） */
.p-homevisit-menu-band {
  margin-top: 16px;
  padding: 8px;
  background: var(--c-pink);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.p-homevisit-menu-band--bold { font-weight: 700; }

.p-homevisit-intro-media{border-radius: var(--r-card);
}

/* ==========================================================================
   4. FOR COMPANIES（企業の方へ）
      カンプ y1748–3590 の水色02帯（上2隅だけ 120px の角丸）。
      上端 126px 分が POINT 帯に重なり、下端 133px 分は次の一般帯に隠れる。
   ========================================================================== */
.p-homevisit-company {
  z-index: 1;
  margin-top: -126px;
  padding: 160px 0 294px;
  background: var(--c-blue02);
  border-radius: var(--r-band) var(--r-band) 0 0;
}

/* ==========================================================================
   5. FOR THE PUBLIC（一般の方へ）
      カンプ y3457–5576 の黄帯（上2隅だけ 120px の角丸）。
      上端 133px 分が企業帯に重なり、下端 213px 分は次の往診帯に隠れる。
   ========================================================================== */
.p-homevisit-public {
  z-index: 2;
  margin-top: -133px;
  padding: 160px 0 386px;
  background: var(--c-yellow);
  border-radius: var(--r-band) var(--r-band) 0 0;
}

/* 症状タグ（カンプ 18px Bold・白ベタ・紺1px枠・間隔8px） */
.p-homevisit-tags { margin-top: 32px; }

/* 最後の「など、様々な症状に対応可能！」だけタグではなく素のテキスト */
.p-homevisit-tags-more {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* ==========================================================================
   6. ABOUT HOUSE CALL（往診について）
      カンプ y5363–6225 の水色03帯（4隅すべて 120px の角丸）。
      上端 213px 分が一般帯に重なる。
   ========================================================================== */
.p-homevisit-housecall {
  z-index: 3;
  margin-top: -213px;
  padding: 120px 0 111px;
  background: var(--c-blue03);
  border-radius: var(--r-band);
}

/* 1px罫で区切られた2ブロック（健康保険が使える症状／料金目安） */
.p-homevisit-hc-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(24, 61, 129, 0.25);
}

.p-homevisit-hc-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-homevisit-hc-tags { margin-top: 8px; }

.p-homevisit-hc-tags .c-tag { font-size: 1rem; }

.p-homevisit-hc-text {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

/* ==========================================================================
   7. CTA
   ========================================================================== */
.p-homevisit-cta { margin-top: 24px; }

.p-homevisit-cta .c-btn { min-height: 52px; padding: 10px 48px; }

.p-homevisit-cta .c-cta-mascot {
  right: 131px;
  bottom: 55px;
  width: 118px;
}

/* ==========================================================================
   レスポンシブ（SP 〜767px / タブレット 768〜991px / PC 992px〜）
   ※ SP・タブレットのカンプが無いため、こちら側で設計した値
   ========================================================================== */
@media (min-width: 992px) {
  /* 写真の列はカンプどおり固定幅。テキスト列が残りを伸縮する */
  .p-homevisit-intro-media { flex: none; width: 518px;}
  .p-homevisit-intro-body { flex: 1 1 0; min-width: 0; margin-left: 32px; }

  /* 一般の方へは写真が右・テキストが左 */
  .p-homevisit-intro--l .p-homevisit-intro-body { margin-left: 0; margin-right: 32px; }
}

@media (max-width: 991.98px) {

  /* 帯の角丸と噛み合わせを縮める */
  .p-homevisit-point { padding: 56px 0 140px; border-radius: 60px 60px 0 0; }
  .p-homevisit-company { margin-top: -60px; padding: 96px 0 140px; border-radius: 60px 60px 0 0; }
  .p-homevisit-public { margin-top: -60px; padding: 96px 0 140px; border-radius: 60px 60px 0 0; }
  .p-homevisit-housecall { margin-top: -60px; padding: 96px 0 80px; border-radius: 60px; }

  .p-homevisit-cards { margin-top: 40px; }
  .p-homevisit-card { padding: 24px; }
  .p-homevisit-card-title { font-size: 1.5rem; }

  .p-homevisit-intro-body { margin-top: 24px; }
  .p-homevisit-intro--l .p-homevisit-intro-body { margin-top: 0; margin-bottom: 24px; }

  .p-homevisit-menu-panel { margin-top: 40px; padding: 32px 24px; }
  .p-homevisit-plan { padding: 24px; }
  .p-homevisit-plan-title { font-size: 1.5rem; padding: 8px 0; }
  .p-homevisit-plan-col + .p-homevisit-plan-col { margin-top: 24px; }
  .p-homevisit-menu-lead { font-size: 1.25rem; }
  .p-homevisit-menu-lead--sm { font-size: 1.125rem; }

  .p-homevisit-cta { margin-top: 0; }
}

@media (max-width: 767.98px) {
  /* MV: 767px以下はカンプ 1396-21433 のSPレイアウト（common.css の c-page-mv--pickup）。
     768〜991px はPCと同じ表示にするため、タブレット向けの指定は置かない */
  .p-homevisit-mv { padding-bottom: 56px; }

  .p-homevisit-mv-lead { font-size: 0.9375rem; }

  /* キャッチが1本20文字あり、共通の18pxだと文中で2行に折り返してしまう
     （3本で1つの文章になっているので折り返すと読みにくい）。
     このページだけ16pxにして1本1行に収める */
  .c-page-mv--pickup.p-homevisit-mv .c-page-mv-catch { font-size: 1rem; }

  .p-homevisit-point { padding: 48px 0 110px; border-radius: 40px 40px 0 0; }
  .p-homevisit-company { margin-top: -40px; padding: 80px 0 110px; border-radius: 40px 40px 0 0; }
  .p-homevisit-public { margin-top: -40px; padding: 80px 0 110px; border-radius: 40px 40px 0 0; }
  .p-homevisit-housecall { margin-top: -40px; padding: 80px 0 64px; border-radius: 40px; }

  .p-homevisit-card-col + .p-homevisit-card-col { margin-top: 24px; }
  .p-homevisit-card-title { font-size: 1.375rem; }
  .p-homevisit-card-text { letter-spacing: 0.06em; }

  .p-homevisit-intro-title { font-size: 1.25rem; letter-spacing: 0.1em; }
  .p-homevisit-intro-body > p { letter-spacing: 0.06em; }

  .p-homevisit-plan-title { font-size: 1.375rem; }
  .p-homevisit-price,
  .p-homevisit-price-name,
  .p-homevisit-plan-price { font-size: 1rem; }
  .p-homevisit-price-num,
  .p-homevisit-plan-num { font-size: 1.625rem; }
  .p-homevisit-price-unit { font-size: 1rem; }

  .p-homevisit-menu-lead { font-size: 1.0625rem; }
  .p-homevisit-menu-lead--sm { font-size: 1rem; }
  .p-homevisit-menu-band { font-size: 0.875rem; text-align: left; }

  .p-homevisit-tags-more { font-size: 1.0625rem; letter-spacing: 0.1em; }
  .p-homevisit-hc-title { font-size: 1.125rem; }
}