@charset "UTF-8";
/*====================================
    診療ページ共通の追加スタイル
      page-low-dose-contraceptive.php
      page-pill-prescription.php
    abortion.css を読み込んだ後に読み込むこと。

    ※ 旧ファイル名 low-dose-contraceptive.css。
      ピルの処方ページでも同じ調整が必要になったため汎用化した。
====================================*/

/*------------------------------------
  選ばれる理由：見出しを左寄せ
  .ttl-h3 は abortion.css で text-align:center が指定されているため、
  .luna-reasons を付けたセクション内だけ上書きする。
------------------------------------*/
.luna-reasons .ttl-h3 {
  text-align: left;
}

/*------------------------------------
  選ばれる理由：診療時間テーブル
  abortion.css の診療時間スタイルは .access 配下にスコープされており
  （.access .schedule-container / .access .schedule など）、
  アクセス情報セクションの外では一切適用されない。
  同じ見た目になるよう、このセクション用に再定義する。
------------------------------------*/
.luna-reasons .schedule-container {
  width: 100%;
  margin: 30px auto;
}

.luna-reasons .schedule {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px dashed #707070;
  border-bottom: 1px dashed #707070;
}

.luna-reasons .schedule th,
.luna-reasons .schedule td {
  padding: 12px;
  text-align: center;
  font-size: 14px;
}

.luna-reasons .schedule th {
  background-color: var(--bg-pink);
}

.luna-reasons .schedule td {
  vertical-align: middle;
}

.luna-reasons .time-slot.time {
  width: 190px;
  letter-spacing: 0.4em;
}

.luna-reasons .border {
  border-top: 1px dashed #707070;
  border-bottom: 1px dashed #707070;
}

/*------------------------------------
  医師紹介
------------------------------------*/
.doctor-profile .doctor-figure {
  margin: 0 auto 16px;
  text-align: center;
}

.doctor-profile .doctor-photo {
  max-width: 280px;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .luna-reasons .schedule-container {
    margin: 20px auto;
  }

  .luna-reasons .schedule th,
  .luna-reasons .schedule td {
    padding: 8px 4px;
    font-size: 13px;
  }

  .luna-reasons .time-slot.time {
    width: auto;
    letter-spacing: 0;
  }
}

/*------------------------------------
  ピルの種類テーブル（ピルの処方ページ）
  .table01 td は text-align:center が既定だが、
  箇条書きの説明文は左寄せのほうが読みやすいため上書きする。
  項目名（th）は中央寄せのまま。
------------------------------------*/
.pill-type-table td {
  text-align: left;
  padding: 1em 1.2em;
}

/*------------------------------------
  ページ内リンクのスクロール位置
  スマホではヘッダーが position:fixed（高さ10rem＝100px）のため、
  そのままだと見出しがヘッダーの裏に隠れる。
------------------------------------*/
.ttl-h3[id] {
  scroll-margin-top: 2rem;
}

@media screen and (max-width: 767px) {
  .pill-type-table td {
    padding: 1em 0.8em;
  }

  .ttl-h3[id] {
    scroll-margin-top: 11rem;
  }
}