@charset "utf-8";

/* =========================================================
   医療機関のご案内
   ========================================================= */

/* ---------- 白カード ---------- */
.l-card {
  width: 100%;
  max-width: var(--w-content);
  margin: 1.625rem auto 0;
  background: #fff;
  border-radius: 1.25rem;
}
.l-card__inner { padding-inline: 7.5rem; }   /* 120px */
.l-card--main { overflow: hidden; }

.p-town { margin-top: 6.1875rem; }
.p-town img { display: block; width: 100%; }
.p-medical-page .p-cta-split { margin-top: 3.75rem; }
.p-medical-page .c-breadcrumb { margin-top: calc(4.4375rem - var(--wave-h)); }

/* ---------- ヒーロー（リード文なし・タイトルのみ） ---------- */
.p-hero-lower--medical { padding: 6.9375em 0 calc(1.875em + var(--wave-h)); }
/* em = 1200px デザインの実寸（タブレット幅では画面幅に比例して縮む） */
.p-hero-lower--medical .p-hero-lower__deco {
  top: -3.75em;                        /* デザイン y=141 */
  transform: translateX(-14.625em);    /* デザイン x=366 */
  width: 9.4375em;                     /* 151px */
}
.p-hero-lower--medical .p-hero-lower__img {
  top: -5.0625em;                      /* デザイン y=120 */
  transform: translateX(10.9375em);    /* デザイン x=775 */
  width: 13.3125em;                    /* 213px */
}

/* =========================================================
   本文
   ========================================================= */
.p-medical { padding: 5.125rem 0 0; }   /* デザイン: 見出し y=499 */

.p-medical__lead {
  margin-top: 1.625rem;
  font-size: 1rem;
  line-height: 2;      /* 16px / 32px */
}

/* デザイン: ボタン 238×40。赤ちゃんのイラストは本文の右外にはみ出す */
.p-medical__action { margin-top: 2.1875rem; }
.p-medical__btn { min-width: 14.875rem; }
.p-medical__baby {
  position: absolute;
  top: .25rem;
  right: -2.78125rem;
  width: 5.5625rem;    /* 89px */
}

.p-medical__note {
  margin-top: 2.5rem;
  font-size: .6875rem;   /* 11px */
  line-height: 1.6364;   /* 18px */
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media screen and (max-width: 1199px) {
  .l-card { max-width: min(var(--w-content), calc(100% - 2.5rem)); }
}

@media screen and (max-width: 991px) {
  .l-card__inner { padding-inline: 2.5rem; }
  .p-medical { padding-top: 3rem; }
  .p-town { margin-top: 4rem; }

  /* 赤ちゃんのイラストははみ出させず、ボタンの下に置く */
  .p-medical__baby {
    position: static;
    display: block;
    margin: 1.5rem auto 0;
  }
}

@media screen and (max-width: 767px) {
  /* ヒーロー（PC と同じ deco 左 / img 右）。高さは learn ページと共通 */
  .p-hero-lower--medical { padding: 2.4rem 0 calc(1.5rem + var(--wave-h)); }
  .p-hero-lower--medical .p-hero-lower__inner { padding-left: 1.25rem; padding-right: 6.5rem; }
  .p-hero-lower--medical .p-hero-lower__img {
    top: -1.5rem;
    bottom: auto;
    left: auto;
    right: .9375rem;
    transform: none;
    width: 6rem;
  }
  .l-card { max-width: calc(100% - 1.875rem); border-radius: .875rem; }
  .l-card__inner { padding-inline: 1.25rem; }
  .p-medical__lead br { display: none; }
  .p-medical__btn { width: 100%; max-width: 20rem; }
}