/* MLR エリアマップ 更新・失効講習日程 v0.2.2
 * 日程カード本体の見た目は /common/css/layout.css・sp.css の
 * #Contents .license .license_content01_r .inner02 … をそのまま使う。
 * ここでは固定ページ用の調整と、読み込み中・日程なしの表示だけを書く。
 */

.mlr-plan-panel[hidden] {
  display: none;
}
.mlr-plan-panel {
  margin: 40px 0;
  scroll-margin-top: 16px;
}

/* /license/ では左に検索欄があるため幅70%になっている → 全幅にする */
#Contents .mlr-plan-panel .license_content01_r {
  width: auto;
  max-width: none;
  margin-left: 0;
}

/* 読み込み中 */
.mlr-plan-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  padding: 24px 16px;
  color: #00287F;
  font-weight: bold;
}
.mlr-spinner {
  flex: none;
  width: 32px;
  height: 32px;
  border: 4px solid #CAE9FE;
  border-top-color: #00287F;
  border-radius: 50%;
  animation: mlr-spin .8s linear infinite;
}
@keyframes mlr-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mlr-spinner { animation-duration: 2.4s; }
}

/* 日程なし・取得失敗 */
#Contents .mlr-plan-message {
  padding: 24px 16px;
  text-align: center;
  border-top: solid 1px #C1C1C1;
  border-bottom: solid 1px #C1C1C1;
}
#Contents .mlr-plan-message p {
  margin-bottom: 8px;
}
#Contents .mlr-plan-tel {
  font-weight: bold;
  color: #00287F;
}
#Contents .mlr-plan-tel a {
  display: inline-block;
  margin-top: 4px;
  font-size: 24px;
  color: #00287F;
}

/* 選択中の会場ボタン */
.is-mlr-active {
  outline: 3px solid #00287F;
  outline-offset: 2px;
}

/* 見出し（カードの講習名の水色帯と区別する） */
#Contents .mlr-plan-title {
  margin: 0 0 16px;
  padding: 0 0 8px 12px;
  font-size: 20px;
  font-weight: bold;
  color: #00287F;
  border-left: 6px solid #00287F;
  border-bottom: 2px solid #CAE9FE;
  line-height: 1.4;
}
@media only screen and (max-width: 639px) {
  #Contents .mlr-plan-title { font-size: 16px; }
}