@charset "UTF-8";
/*
 * TOP のカレンダー (js/sr-calendar.js)。支給 HTML のダミー画像 (img/top/dummy_calendar.png) の見た目に合わせている。
 * 寸法はダミー画像 (幅 1400) の値。PC では会員ページ (css/member.css) と同じく 1920px 幅を基準に vw に直している。
 */

main .sr_calendar_card {
  padding: 3.3% 4% 3.5%;
  border-radius: 1.562vw;
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
main .sr_calendar_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.833vw;
  padding: 0.833vw 1.562vw 0.833vw 4.167vw;
  border-radius: 0.625vw 0.625vw 0 0;
  background-color: #4a5783;
}
main .sr_calendar_month {
  font-size: clamp(22px, 2.1vw, 40px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}
main .sr_calendar_nav {
  display: flex;
  overflow: hidden;
  border-radius: 0.521vw;
  background-color: #ffffff;
}
/* 文字はボタンの中央に置く。支給 CSS の字間 (body の letter-spacing) が残ると右に余白ができてずれるので 0 にする */
main .sr_calendar_nav_button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: max(50px, 3.438vw);
  height: max(29px, 2.188vw);
  padding: 0 0.833vw;
  border: 0;
  border-left: 1px solid #cccccc;
  background-color: #ffffff;
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #4a5783;
  cursor: pointer;
}
main .sr_calendar_nav_button:first-child {
  border-left: 0;
}
main .sr_calendar_nav_button:nth-child(2) {
  min-width: max(105px, 7.292vw);
  background-color: #f5f5f5;
  font-size: clamp(14px, 0.938vw, 18px);
}
main .sr_calendar_weekdays,
main .sr_calendar_days,
main .sr_calendar_bands {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
main .sr_calendar_weekdays {
  border-left: 1px solid #4a5783;
}
main .sr_calendar_weekday {
  padding: 4px 0;
  border-right: 1px solid #ffffff;
  background-color: #dddddd;
  font-size: clamp(14px, 0.885vw, 17px);
  font-weight: 500;
  text-align: center;
  color: #4a5783;
}
main .sr_calendar_week {
  position: relative;
  min-height: calc(max(104px, 44px + var(--sr-lanes, 0) * 26px + 8px));
  border-left: 1px solid #4a5783;
}
main .sr_calendar_days {
  position: absolute;
  inset: 0;
}
main .sr_calendar_day {
  padding: 6px 0.938vw;
  border-right: 1px solid #4a5783;
  border-bottom: 1px solid #4a5783;
  background-color: #ffffff;
}
main .sr_calendar_day.is-other {
  background-color: #f5f5f5;
}
/* 日付はブロックにして高さを決める。インラインのままだと body の行の高さで下に押され、
   SP で帯と重なる。字間はダミー画像に合わせて詰める (body の letter-spacing を打ち消す) */
main .sr_calendar_date {
  display: block;
  width: fit-content;
  font-size: clamp(14px, 0.885vw, 17px);
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0;
  color: #183cb6;
}
main .sr_calendar_day.is-other .sr_calendar_date {
  color: #888888;
}
main .sr_calendar_day.is-today .sr_calendar_date {
  min-width: 2em;
  border-radius: 52.031vw;
  background-color: #183cb6;
  text-align: center;
  color: #ffffff;
}
/* 帯は日付 (上の余白 6px ＋ 行 28px) の下に 6px あけて置く。帯の行は文字の行 (24px) と同じ高さ。
   狭い PC で vw だけにすると日付に重なり文字が切れるため、1920px のときの値を下限にする */
main .sr_calendar_bands {
  position: relative;
  grid-auto-rows: max(24px, 1.25vw);
  row-gap: 2px;
  padding-top: max(40px, 2.083vw);
}
main .sr_calendar_band {
  overflow: hidden;
  min-width: 0;
  margin: 0 1px;
  padding: 0 8px;
  border: 0;
  font-size: clamp(12px, 0.677vw, 13px);
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.05em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
main .sr_calendar_band:hover,
main .sr_calendar_band:focus-visible {
  filter: brightness(0.92);
}
.sr_calendar_type_training {
  background-color: #4a5783;
  color: #ffffff;
}
.sr_calendar_type_movie {
  background-color: #d4f0fb;
  color: #4a5783;
}
/* 研修受付期間 (事務局の依頼 2026-10-15 で追加)。開催日 (紺)・録画配信 (水色) と見分けられる薄い橙 */
.sr_calendar_type_apply {
  background-color: #ffe3b8;
  color: #4a5783;
}
.sr_calendar_type_news {
  background-color: #ff0880;
  color: #ffffff;
}
/* 記事で選んだ色は、js/sr-calendar.js が style で付ける (inc/calendar.php の sr_calendar_with_color) */
/* カレンダーの上のバー (期間が 1 か月以上のお知らせ)。ダミー画像の「● スプリングキャンペーン　4/1〜4/30まで」
   支給 CSS が ul の margin を !important で 0 にしているため、ここも !important にする */
main .sr_calendar_notices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 1.042vw !important;
}
main .sr_calendar_notice {
  min-width: 35%;
  max-width: 100%;
}
main .sr_calendar_notice_body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1em;
  min-height: max(20px, 1.458vw);
  padding: 3px 0.833vw 3px 1.562vw;
  position: relative;
  font-size: clamp(12px, 0.729vw, 14px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
/* 支給 CSS の * { font-size: 16px; line-height: 2 } が中の span に効いて大きくなるので、バーの指定を引き継がせる */
main .sr_calendar_notice_title,
main .sr_calendar_notice_period {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
main .sr_calendar_notice_body::before {
  content: "";
  position: absolute;
  top: calc(3px + 0.8em - 3px);
  left: 0.625vw;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}
/* 支給 CSS の a:hover が文字色を #333 にするので、帯の文字色に戻す (透過はサイト共通のまま)。
   記事で色を選んだバーは style の文字色が優先される */
main a.sr_calendar_notice_body:hover {
  color: #ffffff;
}
main .sr_calendar_noscript {
  padding: 1.25vw;
  background-color: #ffffff;
}

/* ポップアップ (main の外、body の直下に置く) */
.sr_calendar_dialog {
  /* 支給の destyle.css が dialog の中央寄せ (margin: auto) を消しているため戻す */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(560px, calc(100% - 32px));
  padding: 1.667vw 1.667vw 1.25vw;
  border: 0;
  border-radius: 0.833vw;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.sr_calendar_dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.45);
}
.sr_calendar_dialog_label {
  display: inline-block;
  padding: 2px 0.625vw;
  font-size: clamp(12px, 0.729vw, 14px);
  font-weight: 700;
}
.sr_calendar_dialog_title {
  margin-top: 0.625vw;
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 700;
  line-height: 1.6;
  color: #183cb6;
}
.sr_calendar_dialog_detail {
  margin-top: 8px;
  white-space: pre-line;
  font-size: clamp(13px, 0.833vw, 16px);
  line-height: 1.7;
  color: #333333;
}
.sr_calendar_dialog_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.625vw;
  margin-top: 1.25vw;
}
.sr_calendar_dialog_link,
.sr_calendar_dialog_close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max(105px, 7.292vw);
  height: max(31px, 2.292vw);
  padding: 0 1.042vw;
  border: 1px solid #183cb6;
  border-radius: 52.031vw;
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 700;
  cursor: pointer;
}
.sr_calendar_dialog_link[hidden] {
  display: none;
}
.sr_calendar_dialog_link {
  background-color: #183cb6;
  color: #ffffff;
}
.sr_calendar_dialog_link:hover {
  color: #ffffff;
}
.sr_calendar_dialog_close {
  background-color: #ffffff;
  color: #183cb6;
}

@media screen and (max-width: 767px) {
  main .sr_calendar_card {
    padding: 16px 12px;
    border-radius: 16px;
  }
  main .sr_calendar_notices {
    gap: 4px;
    margin-bottom: 14px !important;
  }
  main .sr_calendar_notice_body {
    min-height: 26px;
    padding: 2px 10px 2px 24px;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  main .sr_calendar_notice_body::before {
    top: calc(2px + 0.8em - 3px);
    left: 9px;
    width: 6px;
    height: 6px;
  }
  main .sr_calendar_head {
    padding: 10px 12px 10px 16px;
  }
  main .sr_calendar_nav_button {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 18px;
  }
  main .sr_calendar_nav_button:nth-child(2) {
    min-width: 64px;
    font-size: 15px;
  }
  main .sr_calendar_weekday {
    font-size: 14px;
  }
  main .sr_calendar_week {
    min-height: calc(max(64px, 28px + var(--sr-lanes, 0) * 20px + 6px));
  }
  main .sr_calendar_day {
    padding: 2px 3px;
  }
  main .sr_calendar_date {
    font-size: 13px;
    line-height: 20px;
  }
  /* 日付 (上の余白 2px ＋ 行 20px) の下に 6px あけて帯を置く。ダミー画像 dummy_calendar_sp.png の間隔 */
  main .sr_calendar_bands {
    grid-auto-rows: 18px;
    padding-top: 28px;
  }
  main .sr_calendar_band {
    padding: 0 2px;
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 0;
  }
}