@charset "UTF-8";
/* page-clinic.css
   page-clinic.php 固有のスタイル(.page--clinic 配下のみ)
   import.css(base.css / base_sp.css)より後に functions.php から読み込む
=================================================================== */

/* clinic page (page-clinic.php)
=================================================================== */
/* 共通 header{...} の残りプロパティ(top/left/z-index)のみ打ち消す。
   position/width は .article--m(クラス)が詳細度で勝つため維持される */
.page--clinic header.article--m {
  top: auto;
  left: auto;
  z-index: auto;
  padding-top: 12rem; /* 旧 section 内に h1 があった時の上余白 */
}

/* 旧: エリア目次・公式情報ボックスは section ではなく div だったため上余白なし。
   最初のエリア(水戸)は旧デザインどおり直前ボックスの mb2 のみで繋ぐ */
.page--clinic div.article--m + section.article--m {
  padding-top: 0;
}

.page--clinic .toc {
  margin: 2.4rem 0 3.2rem;
  padding: 1.6rem 2rem;
  background: #f5f0fa;
  border-radius: 0.8rem;
  font-size: 1.4rem;
}
.page--clinic .toc__title {
  margin-bottom: 1rem;
  font-weight: 700;
}
.page--clinic .toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  line-height: 2;
}
.page--clinic .toc a {
  display: inline;
  height: auto;
  text-decoration: underline;
}

/* 「このリストについて」: エリア一覧とは分離し、目次下部右側の補助リンクにする */
.page--clinic .toc__about {
  margin-top: 1rem;
  text-align: right;
  font-size: 1.3rem;
}

/* 旧 .box--style--1 .box--inner の区切り線に相当。
   article 化で .box--inner が無くなったため、確認日の有無に依存せず
   article 側で「タイトル/リンク行」と「確認日」の間に線(::after)を描画する。
   flex + order で ::after を h3・リンクの直後、確認日の直前に配置 */
.page--clinic article.box--style--1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
/* 見出し行: h3 + URL を1つの flex アイテム(1行)にまとめ、住所・線・確認日は必ず次の行へ。
   PC: 病院名とURLは収まれば横並び(隙間 0.75rem)。SPは base_sp.css で別行 */
.page--clinic .clinic-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
}
.page--clinic .clinic-card__head > a.link--border {
  min-width: 0;
  max-width: 100%;
  height: auto;
  margin-left: 0.75rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.page--clinic article.box--style--1::after {
  content: "";
  order: 1;
  flex: 0 0 100%;
  margin-top: 1.5rem;
  border-top: 1px solid var(--gray2);
}
.page--clinic .clinic-address {
  order: 2;
  flex: 0 0 100%;
  margin-top: 1.5rem;
}
.page--clinic .clinic-confirmed-date {
  order: 3;
  flex: 0 0 100%;
  margin-top: 1.5rem;
}

/* 目次などのページ内リンク: h2 は .anime の初期状態で 3rem 下にずれており(translate3d(0,3rem,0))、
   ずれた位置を基準にスクロールした後、アニメーションで 3rem 上がって見出しが画面上端を越えてしまう。
   その3rem分 + 余白(3rem)を scroll-margin-top で確保し、h2 から表示させる */
.page--clinic h2[id] {
  scroll-margin-top: 6rem;
}
/* 「このリストについて」は section 自体が id を持ち、上に padding-top(12rem) があるため、余白を打ち消して見出し側の表示位置に揃える */
.page--clinic section#about {
  scroll-margin-top: -6rem;
}

.page--clinic .clinic-address__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.page--clinic .clinic-address__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.page--clinic .clinic-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 1.2rem 1.6rem;
  background-color: #7b5ea7;
  color: #fff;
  text-align: center;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}
.page--clinic .clinic-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  height: auto;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}
.page--clinic .clinic-cta a:link,
.page--clinic .clinic-cta a:visited,
.page--clinic .clinic-cta a:hover {
  color: #fff;
}
.page--clinic .clinic-cta__spacer {
  height: 5.2rem;
}

/* clinic page (page-clinic.php)
=================================================================== */
@media only screen and (max-width: 768px) {
  .page--clinic header.article--m {
    padding-top: 8rem;
  }
  .page--clinic .toc {
    margin: 2rem 0 2.4rem;
    padding: 1.4rem 1.6rem;
  }
  /* SP: 病院名(h3)で1行を占有し、URLは必ず次の行へ */
  .page--clinic .clinic-card__head > h3 {
    flex: 0 0 100%;
  }
  .page--clinic .clinic-card__head > a.link--border {
    margin-top: 0.5rem;
    margin-left: 0;
  }
}