@charset "UTF-8";
/* B案 09 clinics（Figma PC 3587:5921 / SP 3587:6667） */
.sec-bclinics {
  line-break: strict;
  --u: min(1px, calc(100vw / 1920));
  --bclinics-orange: #f0831e;
  --bclinics-white: #ffffff;
  --bclinics-bg: #f8f8f8;
  position: relative;
  padding: calc(95 * var(--u)) 0 calc(113 * var(--u));
  background-color: var(--bclinics-bg);
  background-image: url("../../assets/img/clinics/bg-grid-tile.webp");
  background-size: calc(10 * var(--u)) calc(10 * var(--u));
  background-position: calc(-0.22 * var(--u)) calc(-27 * var(--u));
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-feature-settings: normal;
}
:where(.sec-bclinics) :where(p, ul, h2, h3) { margin: 0; }
:where(.sec-bclinics) :where(ul) { padding: 0; list-style: none; }
.bclinics-sp,
.bclinics-brsp { display: none; }

/* ---------- 見出し（ロゴ＋タイトル） ---------- */
.bclinics-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bclinics-logo {
  width: calc(502.253 * var(--u));
  height: calc(211.998 * var(--u));
}
.bclinics-logo img {
  display: block;
  width: 100%;
  height: 100%;
}
.bclinics-title {
  margin-top: calc(19.88 * var(--u));
  font-family: var(--font-heading);
  font-size: min(calc(40 * var(--u)), calc(9.6667px + 1.5799vw));
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  font-feature-settings: normal;
}

/* ---------- 医院カード ---------- */
.bclinics-list {
  display: grid;
  grid-template-columns: repeat(4, calc(312 * var(--u)));
  grid-auto-rows: calc(396 * var(--u));
  column-gap: calc(64 * var(--u));
  row-gap: calc(48 * var(--u));
  justify-content: center;
  align-items: start;
  margin-top: calc(48.12 * var(--u));
}
.bclinics-card {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.bclinics-photo {
  position: relative;
  overflow: hidden;
  height: calc(198.092 * var(--u));
}
.bclinics-photo img {
  position: absolute;
  left: -3.51%;
  top: -5.614%;
  width: 113.63%;
  height: 113.625%;
  max-width: none;
  object-fit: cover;
}
.bclinics-card--tennoji .bclinics-photo img {
  left: -53.075%;
  top: -5.125%;
  width: 212.4%;
  height: 188.16%;
}
.bclinics-name {
  /* Figma PC 09 のショット実測（code.txt の 13.18px はインスタンス縮小の値で、ショットは 16px 相当） */
  margin-top: calc(5.217 * var(--u));
  font-family: var(--font-heading);
  font-size: min(calc(21.42 * var(--u)), calc(12.7633px + 0.4509vw));
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0;
  white-space: nowrap;
  font-feature-settings: normal;
}
.bclinics-addr {
  min-height: 4.9425em;
  margin-top: calc(-0.734 * var(--u));
  font-size: min(calc(16 * var(--u)), calc(13.6667px + 0.1215vw));
  font-weight: 300;
  line-height: 1.6475; /* Figma PC 09 ショット実測の行送り 26.36px（16px 時） */
  white-space: nowrap;
}
.bclinics-card--yao .bclinics-addr {
  margin-top: calc(0.235 * var(--u));
  font-size: min(calc(14.83 * var(--u)), calc(13.8617px + 0.0504vw));
}
.bclinics-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(29.662 * var(--u));
  margin-top: calc(12.851 * var(--u));
  background: var(--bclinics-orange);
  color: var(--bclinics-white);
  font-size: calc(13.18 * var(--u));
  font-weight: 500;
  line-height: 2;
  text-decoration: none;
}
.bclinics-card--yao .bclinics-btn { margin-top: calc(12.677 * var(--u)); }

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .sec-bclinics {
    --u: calc(100vw / 390);
    padding: calc(68.41 * var(--u)) 0 calc(80.45 * var(--u));
    background-position: calc(-14 * var(--u)) calc(-14.59 * var(--u));
  }
  .bclinics-pc,
  .bclinics-brpc { display: none; }
  .bclinics-sp { display: inline; }
  .bclinics-brsp { display: initial; }

  .bclinics-logo {
    width: calc(315.096 * var(--u));
    height: calc(133.001 * var(--u));
  }
  .bclinics-title {
    margin-top: calc(27.928 * var(--u));
    font-size: calc(24 * var(--u));
  }

  .bclinics-list {
    grid-template-columns: repeat(2, calc(165 * var(--u)));
    grid-auto-rows: auto;
    column-gap: calc(25.72 * var(--u));
    row-gap: calc(40.5 * var(--u)); /* ボタンをショット位置（0.9px 下）へ下げた分、行間で吸収（写真の位置は Figma 3587:6695〜6705 のまま） */
    justify-content: start;
    align-items: stretch;
    margin: calc(30.86 * var(--u)) 0 0 calc(19.48 * var(--u));
  }
  /* SP の並び（Figma SP の左→右・上→下） */
  .bclinics-card--akashi { order: 1; }
  .bclinics-card--kakogawa { order: 2; }
  .bclinics-card--sannomiya { order: 3; }
  .bclinics-card--amagasaki { order: 4; }
  .bclinics-card--umeda { order: 5; }
  .bclinics-card--namba { order: 6; }
  .bclinics-card--kuzuha { order: 7; }
  .bclinics-card--kyoto { order: 8; }
  .bclinics-card--ropponmatsu { order: 9; }
  .bclinics-card--itami { order: 10; }
  .bclinics-card--yao { order: 11; }
  .bclinics-card--tennoji { order: 12; }
  /* 最終行は Figma で前行との間隔が 36.54（他は 41.4） */
  .bclinics-card--yao,
  .bclinics-card--tennoji { margin-top: calc(-4.86 * var(--u)); }

  .bclinics-photo { height: calc(109.86 * var(--u)); }
  .bclinics-photo img {
    left: -1.2485%;
    top: -4.97%;
    width: 104.281%;
    height: 108.739%;
  }
  .bclinics-card--akashi .bclinics-photo img {
    left: -9.737%;
    width: 116.481%;
    height: 104.967%;
  }
  .bclinics-card--tennoji .bclinics-photo img {
    left: -4.283%;
    top: -4.97%;
    width: 107.232%;
    height: 108.588%;
  }
  .bclinics-name {
    /* Figma SP 11 ショット実測で文字ブロックは 0.9px 下（マスクグループの code.txt 寸法は描画と 4.1px ずれるためショットを正とする） */
    margin-top: calc(0.652 * var(--u));
    font-size: calc(16 * var(--u));
  }
  /* Figma SP 11: 10 文字の医院名 3 つは幅なりの文字ボックスが左寄せ（I3587:6701 / 6704 / 6705 の 4902:1819 は min-w-full なし） */
  .bclinics-card--amagasaki .bclinics-name,
  .bclinics-card--itami .bclinics-name,
  .bclinics-card--tennoji .bclinics-name { text-align: left; }
  .bclinics-addr,
  .bclinics-card--yao .bclinics-addr {
    min-height: 0;
    margin: calc(-3.666 * var(--u)) 0 calc(7.304 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .bclinics-btn,
  .bclinics-card--yao .bclinics-btn {
    height: calc(22 * var(--u));
    margin-top: auto;
    font-size: calc(13 * var(--u));
  }
}