.visit-band {
  position: relative;
  /* 上の区画との間を詰める（ユーザー指示 2026-09-26）。上の診療案内の padding-bottom は
     効かない。実測で円の釦の下端＝区画の下端（差 0）で、100px の余白は円がはみ出して
     食い潰している。効くのはこちらの上余白だけ。 */
  padding-top: 56px;
  /* 区画の下にも空きを設ける（ユーザー指示 2026-09-26「来院案内セクション下部に
     マージンもうけて」）。margin ではなく padding で取る。この区画の地は白で、
     margin だと外側＝body の地（#F4F4F6）が出てフッターの灰と接してしまう
     （2026-09-24 の「灰色背景色同士を接地させるんじゃねー」と同じ話）。 */
  padding-bottom: 96px;
  background-color: var(--amoxi-black2);
}

.visit-band__layout {
  display: grid;
  /* 器の幅に追従させる。固定の 660px だと 660+70+440=1170 で、1140px の器
     （内幅 1110）から溢れる。地図だけ実寸を保ち、文の側が伸び縮みする。 */
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 70px;
  align-items: start;
}

.visit-band__groups {
  min-width: 0;
}

.visit-band__rows {
  display: grid;
  row-gap: 28px;
  margin: 0;
}

/* 必須の 1 点。黒字で、散文より 1 段強く出す。 */
.visit-band__must {
  margin: 0 0 6px;
  word-break: normal;
  color: var(--amoxi-white);
  font-size: 16px;
  font-weight: 700;
}

/* 散文。1 情報 1 文。 */
.visit-band__prose {
  margin: 0;
  /* 日本語レイヤ（lang-ja.css:5）は :lang(ja) * に word-break: keep-all を掛ける。
     日本語の普通の折り返しが止まり、読点と中黒でしか折れないので、列挙が
     「…お薬手帳・／紹介状を…」のように途中で切れる（ユーザー指摘 2026-09-26
     「改行されているのが気になっている、違和感」）。
     .about-three__text と .hero-three__text で 2026-09-24 に同じ手当てを
     している（「意図した改行不要、そのまま表示でよい」）。 */
  word-break: normal;
  color: var(--amoxi-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  font-style: normal;
}


/* ラベルと値の書き方は診療時間の区画に揃える（ユーザー指示 2026-09-26
   「診療時間セクションのラベル＋値の書き方で統一したい」）。
   実測した写す先（.hours-table__list、qo-hours-table.css）:
     ラベル dt  14px / 500 / --amoxi-white(#1A1B1F)、直後に 28px の短い罫
     値   dd  16px / 400 / --amoxi-text(#5C5955)、左へ 28px の字下げ（罫の幅と同じ）
     行の間 12px
   2 列に並べるのをやめ、ラベルを 1 行目・値を 2 行目に置く。
   罫は border-top で引く（診療時間は height:1px だが、装飾の罫は縁で引くという
   この木の決まりに合わせる。見た目は同じ 1px）。 */
.visit-band__row {
  display: grid;
  row-gap: 12px;
}

.visit-band__row dt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  /* ラベルと罫はブランド色（ユーザー指示 2026-09-26
     「『ラベル＋罫線』表示はブランドカラーにしてください」）。 */
  color: var(--amoxi-base-strong);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}

.visit-band__row dt::after {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  border-top: 1px solid currentColor;
  opacity: 0.6;
}

.visit-band__row dd {
  margin: 0;
  padding-left: 28px;
  color: var(--amoxi-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}

.visit-band__row dd > span {
  display: block;
}

/* 住所の行。道順の散文の下に、ピンの印を付けて置く（ユーザー指示 2026-09-26）。
   印は行の高さに揃え、折り返しても字が印の下へ回り込まないよう欄で組む。 */
.visit-band__address {
  display: grid;
  word-break: normal;
  grid-template-columns: auto 1fr;
  /* 印と住所の間を空ける（ユーザー指示 2026-09-26）。 */
  gap: 10px;
  margin: 6px 0 0;
  color: var(--amoxi-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  font-style: normal;
}

/* 住所の添え（駐車場）。行が折れても括弧が割れないようにまとめる。 */
.visit-band__address-note {
  white-space: nowrap;
}

.visit-band__address .icon-location-2 {
  /* 印はブランド色（ユーザー指示 2026-09-26）。細い線画なので、字より一回り
     大きくしないとブランド色に見えない。行の中心に来るよう行高は字に合わせる。 */
  color: var(--amoxi-base-strong);
  font-size: 1.25em;
  line-height: 1.44; /* 1.8 × 16 ÷ 20 = 行の高さを字の行と同じ 28.8px に保つ */
}

.visit-band__row address {
  margin: 0;
  font-style: normal;
}

.visit-band__term--required::before {
  content: "";
  order: -1;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--amoxi-base-strong);
}

/* 地図とリンクは 1 枚の札。リンクを地図の下へ浮かせると、別々の物が 2 つ
   並んでいるように見える（ユーザー指摘 2026-09-26「とってつけたテキスト
   リンクと矢印がきにくわない」）。縁は札が持ち、地図とリンクはその中に入る。 */
.visit-band__map {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #D2D2D5;
  background-color: var(--amoxi-black2);
}

/* 地図の高さ。PC は本文の欄に自動で揃える（下の 1200px の段）。
   狭い段は札が積まれるだけなので、ここで決め打つ。 */
.visit-band__map-frame {
  box-sizing: border-box;
  height: var(--visit-map-h, 356px);
  overflow: hidden;
}

.visit-band__map-frame > iframe,
.visit-band__map-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.visit-band__map-frame > img {
  object-fit: cover;
}

/* 札の下段。行ぜんぶが押せる。字はラベルと同じ 14px / 500 で、
   この区画の「ラベル＋罫線」の目盛りに乗せる。 */
.visit-band__map-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 15px 18px;
  border-top: 1px solid #D2D2D5;
  color: var(--amoxi-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.visit-band__map-link:hover,
.visit-band__map-link:focus-visible {
  color: var(--amoxi-base-strong);
  background-color: rgba(var(--amoxi-base-rgb, 190, 57, 106), 0.06);
}

/* 別タブの印（ユーザー指示 2026-09-26「target_blank のアイコンにしてください、
   矢印ではなくて」）。丸で囲わない（同日「border 不要です」）。
   astro-icon で SVG を埋め込む（AboutThree.astro と同じ作法）。
   FontAwesome にも fa-external-link-alt はあるが、この頁は FA の印を 1 つも
   使っておらず、1 つのために webfont を落とすことになるので使わない。 */
.visit-band__map-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--amoxi-base-strong);
  font-size: 16px;
  transition: transform 0.2s ease;
}

.visit-band__map-link__icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.visit-band__map-link:hover .visit-band__map-link__icon,
.visit-band__map-link:focus-visible .visit-band__map-link__icon {
  transform: translate(2px, -2px);
}

/* PC（2 欄のとき）は地図の高さを本文の欄に自動で揃える（ユーザー決裁 2026-09-26
   「本文と下端を揃える」）。固定値だと本文の文言を直すたびにずれるので、
   地図の札ごと本文と同じ行に入れて伸ばし、中の地図が残りを取る。 */
@media (min-width: 1200px) {
  /* 札ごと本文の欄の高さに伸ばす。layout の align-items:start を
     ここだけ打ち消さないと、iframe 既定の 150px に潰れる。 */
  .visit-band__map {
    align-self: stretch;
  }

  /* 地図は札の残りを全部もらう。下段のリンクの分だけ自動で縮む。 */
  .visit-band__map-frame {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
}

@media (max-width: 1199px) {
  .visit-band__layout {
    grid-template-columns: minmax(0, 660px);
    gap: 28px;
  }

  .visit-band__map {
    width: 440px;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  /* 狭い段では地図を欄の中央に置く（ユーザー指示 2026-09-26
     「スマホの Googlemap は中央寄せ」）。360px の固定幅が欄より狭いと左へ寄る。 */
  .visit-band__map {
    width: 360px;
    max-width: 100%;
    margin-inline: auto;
  }

  .visit-band__map-frame {
    --visit-map-h: 232px;
  }
}