@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;
  }
}