@charset "UTF-8";
/*
 * ログイン画面と会員ページ。支給 HTML に無く、Figma から組んだ画面の CSS。
 * 支給 CSS (assets/css/) とクラス名が衝突しないよう、すべて sr_ で始める。
 * 寸法は Figma (幅 1920) の値を、PC では vw に直している (下の注記)。
 */

:root {
  --sr-navy: #0d3781;
  --sr-gray-bg: #f5f5f5;
  --sr-gray-tab: #c8c8c8;
  --sr-border: #333333;
  --sr-error: #e60033;
  /* 会員ページ デザインパーツ (Figma「会員ページ　デザインパーツ」2026-10) */
  --sr-mypage-blue: #183cb6;
  --sr-mypage-slate: #4a5783;
  --sr-mypage-line: #c2c2c2;
}

/*
 * PC の大きさは、支給 CSS と同じく 1920px 幅を基準に vw で伸び縮みさせる (リキッドレイアウト)。
 * 余白は vw。文字は clamp(下限, vw, 1920px のときの大きさ)。幅・高さは max(下限, vw) で、
 * 狭い画面で列が細くなりすぎて文字がはみ出さないようにする。スマホ (767px 以下) は px のまま。
 */

/* ----------------------------------------------------------------
   ログイン・パスワード再設定
   Figma「【会員】ログイン画面」: 枠 960 × 762 / 角丸 30 / #F5F5F5
   ---------------------------------------------------------------- */
main .sr_login {
  padding: 6.25vw 0.833vw 7.812vw;
}
main .sr_login_box {
  max-width: 50vw;
  margin: 0 auto;
  padding: 4.167vw 0.833vw 4.688vw;
  border-radius: 1.562vw;
  background-color: var(--sr-gray-bg);
}
main .sr_login_title {
  font-size: clamp(26px, 1.667vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  color: #000000;
}
main .sr_login_form {
  max-width: 32.812vw;
  margin: 0 auto;
}
main .sr_login_label {
  display: block;
  margin-top: 2.083vw;
  font-size: clamp(18px, 1.146vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: #000000;
}
main .sr_login_input {
  display: block;
  width: 100%;
  height: max(43px, 3.229vw);
  margin-top: 0.833vw;
  padding: 0 1.458vw;
  border: 1px solid transparent;
  background-color: #ffffff;
  font-size: clamp(18px, 1.146vw, 22px);
  letter-spacing: 0.1em;
  color: #333333;
}
main .sr_login_input:focus {
  outline: none;
  border-color: var(--sr-navy);
}
main .sr_login_link {
  margin-top: 1.25vw;
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  color: #000000;
}
main .sr_login_link a {
  font-weight: 700;
  color: var(--sr-navy);
}
main .sr_login_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(270px, 18.75vw);
  max-width: 100%;
  height: max(45px, 3.333vw);
  margin: 3.125vw auto 0;
  border: 0;
  background-color: var(--sr-navy);
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffffff;
  transition: opacity 0.4s ease;
}
main .sr_login_submit:hover {
  color: #ffffff;
  opacity: 0.8;
}
main .sr_login_text {
  max-width: 32.812vw;
  margin: 1.667vw auto 0;
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #333333;
}
main .sr_login_error {
  margin-top: 1.667vw;
  padding: 0.625vw 0.833vw;
  border-left: 4px solid var(--sr-error);
  background-color: #ffffff;
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--sr-error);
}

@media screen and (max-width: 767px) {
  main .sr_login {
    padding: 48px 16px 80px;
  }
  main .sr_login_box {
    padding: 40px 20px 48px;
    border-radius: 16px;
  }
  main .sr_login_title {
    font-size: 24px;
  }
  main .sr_login_label {
    margin-top: 28px;
    font-size: 18px;
  }
  main .sr_login_input {
    height: 52px;
    padding: 0 16px;
    font-size: 18px;
  }
  main .sr_login_link,
  main .sr_login_text,
  main .sr_login_error {
    font-size: 16px;
  }
  main .sr_login_submit {
    height: 56px;
    margin-top: 40px;
    font-size: 18px;
  }
}

/* ----------------------------------------------------------------
   会員ページの枠組み
   Figma「【会員】会員ページ（マイページ）」: 左メニュー幅 317 / 本文は左 121・右 205 空けて幅 1277
   ---------------------------------------------------------------- */
main .sr_mypage {
  display: flex;
  max-width: 1920px;
  margin: 0 auto;
}
main .sr_mypage_menu {
  flex-shrink: 0;
  width: max(238px, 16.51vw);
  padding: 1.094vw 0 7.812vw;
  border-right: 1px solid var(--sr-mypage-line);
  background-color: var(--sr-gray-bg);
}
main .sr_mypage_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 項目の間に線。Figma は会員ページTOP と書式の間だけ線が無い (選択中の青で区切られるため) */
main .sr_mypage_menu li + li {
  border-top: 1px solid var(--sr-mypage-line);
}
main .sr_mypage_menu li:last-child {
  border-bottom: 1px solid var(--sr-mypage-line);
}
main .sr_mypage_menu a {
  display: block;
  padding: 0.833vw 1.25vw 0.833vw 1.927vw;
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1px;
  color: #000000;
}
main .sr_mypage_menu a:hover {
  color: var(--sr-mypage-blue);
  opacity: 1;
}
main .sr_mypage_menu a[aria-current="page"] {
  background-color: var(--sr-mypage-blue);
  color: #ffffff;
}
main .sr_mypage_menu .sr_mypage_logout {
  display: table;
  margin: 2.083vw 0 0 1.927vw;
  padding: 0;
  font-size: clamp(14px, 0.938vw, 18px);
  color: var(--sr-navy);
  text-decoration: underline;
}
main .sr_mypage_menu .sr_mypage_password + .sr_mypage_logout {
  margin-top: max(12px, 0.833vw);
}
main .sr_mypage_main {
  flex: 1;
  min-width: 0;
  padding: 2.604vw 10.677vw 7.812vw 6.302vw;
}
/* 支給のヘッダーがハンバーガーになる幅 (1200px 未満) では、本文の左右の余白を詰める */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  main .sr_mypage_main {
    padding-right: 3.125vw;
    padding-left: 3.125vw;
  }
}
main .sr_mypage_title {
  font-size: clamp(24px, 1.562vw, 30px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #000000;
}
main .sr_mypage_notice {
  margin-top: 1.667vw;
  padding: 2.083vw;
  background-color: var(--sr-gray-bg);
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 1.8;
}
main .sr_mypage_notice a {
  color: var(--sr-navy);
  text-decoration: underline;
}

/* 連絡先メールアドレス */
main .sr_mypage_contact {
  margin-top: 3.125vw;
}
main .sr_mypage_contact_title {
  font-size: clamp(22px, 1.46vw, 28px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: center;
  color: var(--sr-mypage-slate);
}
main .sr_mypage_contact_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.062vw;
  margin-top: 1.25vw;
}
main .sr_mypage_contact_item {
  padding: 1.615vw 1.25vw 1.562vw;
  border-radius: 1.042vw;
  background-color: var(--sr-gray-bg);
  text-align: center;
}
/* 見出しはオレンジ (中小事業主) と緑 (一人親方) のグラデーションの帯 */
main .sr_mypage_contact_lead {
  padding: 0.521vw 1.042vw;
  border-radius: 0.521vw;
  background-image: linear-gradient(to right, #d38200, #da5f07);
  font-size: clamp(16px, 1.3vw, 25px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1px;
  color: #ffffff;
}
main .sr_mypage_contact_item + .sr_mypage_contact_item .sr_mypage_contact_lead {
  background-image: linear-gradient(to right, #21a778, #28ac45);
}
/* 語の切れ目で折り返す。支給 CSS の * { font-size: 16px } が span にも掛かるため、大きさは親に合わせる */
main .sr_mypage_contact_lead span {
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
/* 狭い PC では 2 つの見出しの折り返しをそろえる (片方だけ 2 行にならないように) */
@media screen and (min-width: 768px) and (max-width: 1599px) {
  main .sr_mypage_contact_lead span {
    display: block;
  }
}
main .sr_mypage_contact_name {
  margin-top: 1.25vw;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1px;
  color: #000000;
}
main .sr_mypage_contact_mail {
  display: inline-block;
  margin-top: 0;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1px;
  color: #3899e9;
  word-break: break-all;
}

@media screen and (max-width: 767px) {
  main .sr_mypage {
    flex-direction: column;
  }
  main .sr_mypage_menu {
    width: 100%;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid var(--sr-mypage-line);
  }
  main .sr_mypage_menu ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  /* 2 列に並べるため、線は各項目の下に引く */
  main .sr_mypage_menu li + li,
  main .sr_mypage_menu li:last-child {
    border-top: 0;
  }
  main .sr_mypage_menu li {
    border-bottom: 1px solid var(--sr-mypage-line);
  }
  main .sr_mypage_menu li:nth-child(odd) {
    border-right: 1px solid var(--sr-mypage-line);
  }
  main .sr_mypage_menu a {
    padding: 10px 16px;
    font-size: 16px;
  }
  main .sr_mypage_menu .sr_mypage_logout {
    margin: 12px 0 0 16px;
  }
  main .sr_mypage_main {
    padding: 32px 16px 80px;
  }
  main .sr_mypage_title {
    font-size: 22px;
  }
  main .sr_mypage_notice {
    padding: 20px;
    font-size: 16px;
  }
  main .sr_mypage_contact_list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  main .sr_mypage_contact_item {
    padding: 20px 16px;
    border-radius: 12px;
  }
  main .sr_mypage_contact_lead {
    padding: 8px 12px;
    font-size: 15px;
    letter-spacing: 0.05em;
  }
  main .sr_mypage_contact_name {
    margin-top: 16px;
    font-size: 14px;
  }
  main .sr_mypage_contact_mail {
    font-size: 16px;
  }
}

/* ----------------------------------------------------------------
   研修の申込フォーム (研修詳細の本文の下)
   Figma「研修申し込みフォーム（タブなし）」: 枠線 1px / 見出しと項目名は紺
   ---------------------------------------------------------------- */
main .sr_apply {
  margin-top: 3.125vw;
  padding: 48px clamp(20px, 5vw, 120px) 56px;
  border: 1px solid var(--sr-border);
  background-color: #ffffff;
}
main .sr_apply_title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.833vw;
  font-size: clamp(22px, 1.56vw, 30px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sr-navy);
}
main .sr_apply_lead {
  margin-top: 1.667vw;
  font-size: clamp(13px, 0.833vw, 16px);
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #333333;
}
main .sr_apply_lead_small {
  margin-top: 0.833vw;
  font-size: clamp(12px, 0.729vw, 14px);
}
main .sr_apply_message {
  margin-top: 1.667vw;
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--sr-navy);
}
main .sr_apply_notice {
  margin-top: 1.25vw;
  padding: 0.625vw 0.833vw;
  border-left: 4px solid var(--sr-error);
  background-color: #fff3f5;
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--sr-error);
}
main .sr_apply_form {
  margin-top: 1.25vw;
}
main .sr_apply_group + .sr_apply_group {
  margin-top: 1.042vw;
  padding-top: 1.042vw;
  border-top: 1px solid var(--sr-border);
}
main .sr_apply_row {
  display: grid;
  grid-template-columns: minmax(160px, 30%) 1fr;
  align-items: start;
  gap: 8px 1.25vw;
  padding: 0.625vw 0;
}
main .sr_apply_group_titled .sr_apply_row:not(.sr_apply_row_head) .sr_apply_label {
  padding-left: 0.833vw;
}
main .sr_apply_label,
main .sr_apply_section {
  padding-top: 0.729vw;
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--sr-navy);
}
main .sr_apply_row_head .sr_apply_section {
  padding-top: 0;
}
main .sr_apply_row_head .sr_apply_field {
  padding-top: 0;
}
main .sr_apply_required {
  margin-left: 4px;
  color: var(--sr-error);
}
main .sr_apply_input {
  display: block;
  width: 100%;
  height: max(36px, 2.708vw);
  padding: 0 0.833vw;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  font-size: clamp(13px, 0.833vw, 16px);
  letter-spacing: 0.05em;
  color: #333333;
}
/* 会員の情報を入れた変更できない欄 (会員No. など)。Figma では他の欄と同じ白地・同じ文字色 */
main .sr_apply_input[readonly] {
  background-color: #ffffff;
  color: #333333;
  cursor: default;
}
main .sr_apply_input:focus {
  outline: 2px solid var(--sr-navy);
  outline-offset: -1px;
}
main .sr_apply_input[aria-invalid="true"] {
  border-color: var(--sr-error);
}
main .sr_apply_radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 1.667vw;
  padding-top: 0.729vw;
}
main .sr_apply_check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(13px, 0.833vw, 16px);
  letter-spacing: 0.1em;
  color: #333333;
  cursor: pointer;
}
main .sr_apply_check input {
  width: max(15px, 1.042vw);
  height: max(14px, 1.042vw);
  accent-color: var(--sr-navy);
}
main .sr_apply_row.is-disabled .sr_apply_label,
main .sr_apply_row.is-disabled .sr_apply_check,
main .sr_apply_row.is-disabled .sr_apply_note {
  color: #bbbbbb;
  cursor: default;
}
main .sr_apply_note {
  margin-top: 6px;
  font-size: clamp(12px, 0.677vw, 13px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #333333;
}
main .sr_apply_error {
  margin-top: 6px;
  font-size: clamp(12px, 0.729vw, 14px);
  font-weight: 700;
  color: var(--sr-error);
}
main .sr_apply_confirm {
  margin: 0;
}
main .sr_apply_confirm .sr_apply_row {
  border-bottom: 1px solid #dddddd;
}
main .sr_apply_confirm .sr_apply_label {
  padding-top: 0;
}
main .sr_apply_value {
  margin: 0;
  font-size: clamp(13px, 0.833vw, 16px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #333333;
  word-break: break-all;
}
main .sr_apply_form > .sr_apply_section {
  margin-top: 1.25vw;
}
main .sr_apply_trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
main .sr_apply_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.833vw;
  margin-top: 2.083vw;
}
main .sr_apply_button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.083vw;
  min-width: max(210px, 14.583vw);
  height: max(42px, 3.125vw);
  margin: 1.667vw auto 0;
  padding: 0 1.25vw;
  border: 1px solid var(--sr-navy);
  background-color: var(--sr-navy);
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffffff;
  transition: opacity 0.4s ease;
}
main .sr_apply_buttons .sr_apply_button {
  margin: 0;
}
main .sr_apply_button:hover {
  color: #ffffff;
  opacity: 0.8;
}
main .sr_apply_button_back {
  background-color: #ffffff;
  color: var(--sr-navy);
}
main .sr_apply_button_back:hover {
  color: var(--sr-navy);
}

@media screen and (max-width: 767px) {
  main .sr_apply {
    margin-top: 40px;
    padding: 32px 16px 40px;
  }
  main .sr_apply_row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  main .sr_apply_label,
  main .sr_apply_section {
    padding-top: 0;
  }
  main .sr_apply_group_titled .sr_apply_row:not(.sr_apply_row_head) .sr_apply_label {
    padding-left: 0;
  }
  main .sr_apply_radios {
    padding-top: 0;
  }
  main .sr_apply_button {
    width: 100%;
    min-width: 0;
  }
}

/* ----------------------------------------------------------------
   会員ページTOP のタブ
   Figma「会員ページ　デザインパーツ」: タブは紺地に白文字、選択中は中身と同じグレーで文字が紺。
   中身はグレーの背景の上に白い箱
   ---------------------------------------------------------------- */
main .sr_mypage_tabs {
  margin-top: 1.667vw;
}
main .sr_mypage_tab_list {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
main .sr_mypage_tab_list li {
  flex: 1;
}
main .sr_mypage_tab {
  display: block;
  padding: 0.469vw 8px 8px;
  border: 2px solid #ffffff;
  border-bottom: 0;
  border-radius: 1.042vw 1.042vw 0 0;
  background-color: var(--sr-mypage-slate);
  font-size: clamp(14px, 1.04vw, 20px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.15em;
  text-align: center;
  color: #ffffff;
}
main .sr_mypage_tab:hover {
  color: #ffffff;
  opacity: 0.85;
}
main .sr_mypage_tab[aria-current="page"],
main .sr_mypage_tab[aria-current="page"]:hover {
  border-color: var(--sr-gray-bg);
  background-color: var(--sr-gray-bg);
  color: var(--sr-mypage-slate);
  opacity: 1;
}
main .sr_mypage_panel {
  padding: 1.875vw 1.667vw 1.25vw;
  background-color: var(--sr-gray-bg);
}
/* タブの中身の上の説明 (研修一覧のお気に入りの説明) */
main .sr_mypage_tab_note {
  margin: -0.521vw 0 1.042vw;
  font-size: clamp(13px, 0.833vw, 16px);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #333333;
}
main .sr_mypage_panel_body {
  padding: 32px clamp(16px, 1.25vw, 24px) 40px;
  background-color: #ffffff;
}
/* 申し込み情報確認は、グレーの上に直接置く (Figma「【会員】研修お申し込み情報」) */
main .sr_mypage_panel_body:has(> .sr_application) {
  padding: 0 0 0.625vw;
  background-color: transparent;
}
main .sr_mypage_empty {
  padding: 1.25vw 0;
  font-size: clamp(13px, 0.833vw, 16px);
  line-height: 1.8;
  color: #555555;
}
main .sr_mypage_more {
  margin-top: 1.25vw;
  text-align: right;
}
main .sr_mypage_more a {
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 700;
  color: var(--sr-navy);
  text-decoration: underline;
}
main .sr_mypage_success {
  margin-bottom: 1.25vw;
  padding: 0.625vw 0.833vw;
  border-left: 4px solid #1e8a4c;
  background-color: #eef8f1;
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 700;
  color: #1e6b3d;
}

/* お気に入りの ☆ */
main .sr_fav_form {
  display: inline-flex;
  margin: 0;
}
main .sr_fav {
  width: max(24px, 1.667vw);
  height: max(22px, 1.667vw);
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(18px, 1.146vw, 22px);
  line-height: 1;
  color: #333333;
  cursor: pointer;
}
main .sr_fav[aria-pressed="true"] {
  color: #f0a500;
}
main .sr_fav:disabled {
  opacity: 0.5;
}

main .sr_training_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 研修一覧の行: ☆・回次・ステータス・開催日・タイトル */
main .sr_training_row {
  display: grid;
  grid-template-columns: max(24px, 1.667vw) max(75px, 5.208vw) max(128px, 8.854vw) max(150px, 7.812vw) 1fr;
  align-items: start;
  gap: 8px 0.833vw;
  padding: 0.729vw 0;
  border-bottom: 1px solid #cccccc;
  font-size: clamp(12px, 0.781vw, 15px);
  line-height: 1.7;
}
main .sr_training_session {
  padding-top: 3px;
  letter-spacing: 0.05em;
}
main .sr_training_status {
  display: block;
  padding: 4px 4px;
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.5;
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 「（ご案内をお待ちください）」は文字が多いため、Figma (会員ページ　デザインパーツ) と同じく文字を小さくする (1920px で 12px) */
main .sr_training_status.sr_status_waiting {
  font-size: clamp(9px, 0.625vw, 12px);
  letter-spacing: 0;
  text-overflow: clip;
}
/* 色は Figma「【会員】会員ページTOP」(会員ページ　デザインパーツ) のステータスの色 */
main .sr_status_waiting { background-color: #039be5; }
main .sr_status_accepting { background-color: #9651be; }
main .sr_status_applied { background-color: #f2203e; }
main .sr_status_closed { background-color: #717171; }
main .sr_status_preparing { background-color: #039be5; }
main .sr_status_streaming { background-color: #9651be; }
main .sr_status_ended { background-color: #717171; }
main .sr_training_dates {
  display: flex;
  flex-direction: column;
  padding-top: 3px;
  letter-spacing: 0.05em;
}
main .sr_training_title {
  padding-top: 3px;
  color: #333333;
}
/* Figma ではタイトルに下線が無い。リンクのまま、下線はマウスを載せたときだけ出す */
main a.sr_training_title {
  text-decoration: none;
}
main a.sr_training_title:hover {
  color: #333333;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 動画アーカイブ */
main .sr_movie + .sr_movie {
  margin-top: 2.5vw;
}
main .sr_movie_head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0.625vw;
  background-color: #ebebeb;
}
main .sr_movie_term {
  font-size: clamp(12px, 0.781vw, 15px);
  letter-spacing: 0.05em;
}
main .sr_movie_title {
  margin-top: 0.833vw;
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  color: #333333;
}
main .sr_movie_player {
  max-width: 41.667vw;
  margin: 0.833vw auto 0;
}

/* お気に入りの「研修」「動画」 */
main .sr_fav_tabs {
  display: flex;
  gap: 0;
  margin: 0 0 8px;
  padding: 0;
  border-bottom: 1px solid #7d7d7d;
  list-style: none;
}
main .sr_fav_tab {
  display: block;
  min-width: max(135px, 9.375vw);
  padding: 0.521vw 1.25vw;
  border: 1px solid #fea71a;
  border-bottom: 0;
  border-radius: 0.833vw 0.833vw 0 0;
  background-color: #ffffff;
  font-size: clamp(13px, 0.833vw, 16px);
  letter-spacing: 0.1em;
  text-align: center;
  color: #333333;
}
main .sr_fav_tab[aria-current="page"] {
  background-color: #fea71a;
  color: #ffffff;
}

/* 会員プロフィール */
main .sr_profile_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.833vw;
  margin-bottom: 1.25vw;
}
main .sr_profile_actions_bottom {
  margin: 2.083vw 0 0;
}
main .sr_profile_badge,
main .sr_profile_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.521vw;
  min-width: max(128px, 8.854vw);
  height: max(32px, 2.396vw);
  padding: 0 1.042vw;
  border: 1px solid var(--sr-navy);
  background-color: var(--sr-navy);
  font-size: clamp(14px, 0.885vw, 17px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffffff;
}
main .sr_profile_badge {
  border-color: var(--sr-navy);
}
main .sr_profile_button {
  cursor: pointer;
  transition: opacity 0.4s ease;
}
main .sr_profile_button:hover {
  color: #ffffff;
  opacity: 0.8;
}
main .sr_profile_button_sub {
  background-color: #ffffff;
  color: var(--sr-navy);
}
main .sr_profile_button_sub:hover {
  color: var(--sr-navy);
}
main .sr_profile_preview {
  background-color: #f5f5f5;
}
main .sr_member_preview_office {
  padding: 1.667vw 0.833vw 0;
  font-size: clamp(22px, 1.56vw, 30px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  color: #333333;
}
main .sr_profile_form .sr_apply_row {
  grid-template-columns: minmax(160px, 28%) 1fr;
}
/* エリアの選択。Figma は角丸の枠で、右に ∨ の印。支給 CSS (destyle) で消える矢印を背景で描く */
main .sr_profile_form select.sr_apply_input {
  padding-right: 2.5vw;
  border-color: #999999;
  border-radius: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23333333' stroke-width='2.2'/%3E%3C/svg%3E");
  background-position: right 18px center;
  background-repeat: no-repeat;
  background-size: 14px 9px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
main .sr_profile_textarea {
  height: auto;
  padding: 0.625vw 0.833vw;
  line-height: 1.7;
}
main .sr_profile_note_top {
  margin: 0 0 6px;
}
main .sr_profile_checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 1.25vw;
  padding-top: 0.729vw;
}
main .sr_profile_checks_2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
main .sr_profile_hours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 1.25vw;
  padding-top: 0.729vw;
}
main .sr_profile_hours_day {
  display: flex;
  align-items: center;
  gap: 0.625vw;
}
main .sr_profile_hours_name {
  width: 1.5em;
  font-weight: 700;
}
main .sr_profile_hours_time {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.625vw;
  font-size: clamp(12px, 0.781vw, 15px);
}
main .sr_profile_hours_time {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
main .sr_profile_hours_time > span:first-child {
  margin-right: 4px;
}
main .sr_profile_hours_time .sr_apply_input {
  width: max(39px, 2.708vw);
  height: max(31px, 2.292vw);
  padding: 0 4px;
  text-align: center;
}
main .sr_profile_image img {
  width: max(90px, 6.25vw);
  height: max(84px, 6.25vw);
  margin-bottom: 8px;
  object-fit: cover;
}
main .sr_profile_file {
  display: block;
  max-width: 100%;
  margin-top: 0.521vw;
  font-size: clamp(12px, 0.781vw, 15px);
}
main .sr_profile_sns {
  display: flex;
  flex-direction: column;
  gap: 0.521vw;
}
main .sr_profile_sns_row {
  display: grid;
  grid-template-columns: max(98px, 6.771vw) 1fr;
  align-items: center;
  gap: 0.625vw;
  font-size: clamp(12px, 0.781vw, 15px);
}
/* SNS の名前の前の ○。Figma にある飾りで、押しても何も変わらない */
main .sr_profile_sns_name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(12px, 0.677vw, 13px);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
main .sr_profile_sns_name::before {
  content: "";
  flex-shrink: 0;
  width: max(10px, 0.729vw);
  height: max(10px, 0.729vw);
  border: 1px solid #333333;
  border-radius: 50%;
}
main .sr_profile_badge {
  cursor: default; /* 表示だけで、押しても切り替わらない */
}
main .sr_profile_heading {
  margin-bottom: 8px;
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sr-navy);
}

/* 編集画面の留意事項。Figma「【会員】会員ページ（マイページ）-1」。同意するまで後ろのフォームを薄くして操作させない */
main .sr_profile_edit {
  position: relative;
}
main .sr_profile_edit.is-locked .sr_profile_form {
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}
main .sr_profile_rules {
  position: absolute;
  inset: 0;
  z-index: 5;
}
main .sr_profile_rules[hidden] {
  display: none;
}
main .sr_profile_rules_inner {
  padding: 8px 0 1.25vw;
  background-color: #ffffff;
}
main .sr_profile_rules_title {
  margin-bottom: 0.833vw;
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  color: #333333;
}
main .sr_profile_rules_body {
  max-height: min(420px, 50vh);
  overflow-y: auto;
  padding: 24px clamp(16px, 2vw, 32px);
  border: 1px solid #7d7d7d;
  background-color: #ffffff;
  font-size: clamp(12px, 0.781vw, 15px);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #333333;
  /* 最後まで読んだら、そのままページ全体がスクロールするようにする (事務局の依頼 2026-10-15)。contain だと枠の中で止まる */
  overscroll-behavior: auto;
}
main .sr_profile_rules_body:focus-visible {
  outline: 2px solid var(--sr-navy);
  outline-offset: 2px;
}
/* 段落の種類ごとの字下げ。Word の字下げに合わせ、2 行目以降は記号や番号の後ろにそろえる */
main .sr_profile_rules_body p {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
main .sr_profile_rules_body .sr_profile_rules_doc_title {
  font-weight: 700;
}
main .sr_profile_rules_body .sr_profile_rules_heading {
  margin-top: 1.5em;
  font-weight: 700;
}
main .sr_profile_rules_body .sr_profile_rules_lead {
  margin-top: 0.5em;
  padding-left: 2em;
  text-indent: -1em;
}
main .sr_profile_rules_body .sr_profile_rules_note {
  padding-left: 3em;
  text-indent: -1em;
}
main .sr_profile_rules_body .sr_profile_rules_lead + .sr_profile_rules_note {
  padding-left: 2em;
  text-indent: 0;
}
main .sr_profile_rules_body .sr_profile_rules_item {
  margin-top: 0.25em;
  padding-left: 3em;
  text-indent: -2em;
}
main .sr_profile_rules_body .sr_profile_rules_sub {
  padding-left: 3em;
  text-indent: -1em;
}
/* 留意事項の PDF で波線の下線が引かれている段落 (冒頭の同意についての案内) */
main .sr_profile_rules_body .sr_profile_rules_em {
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
main .sr_profile_rules_body .sr_profile_rules_subnote {
  padding-left: 4em;
  text-indent: -1em;
}
main .sr_profile_rules_hint {
  margin-top: 0.625vw;
  font-size: clamp(12px, 0.677vw, 13px);
  text-align: center;
  color: #555555;
}
main .sr_profile_rules_agree {
  display: block;
  min-width: max(210px, 14.583vw);
  max-width: 100%;
  min-height: max(36px, 2.708vw);
  margin: 0.625vw auto 0;
  padding: 8px 1.25vw;
  border: none;
  background-color: var(--sr-navy);
  font-size: clamp(14px, 0.885vw, 17px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.4s ease;
}
main .sr_profile_rules_agree:hover {
  opacity: 0.8;
}
main .sr_profile_rules_agree:disabled {
  background-color: #8c8c8c;
  cursor: not-allowed;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  main .sr_mypage_tab_list {
    flex-wrap: wrap;
    gap: 4px;
  }
  main .sr_mypage_tab_list li {
    flex: 1 1 40%;
  }
  main .sr_mypage_tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 0;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    letter-spacing: 0;
  }
  main .sr_mypage_panel {
    padding: 12px 8px 16px;
  }
  main .sr_mypage_panel_body {
    padding: 16px 12px 24px;
  }
  main .sr_mypage_tab_note {
    margin: 0 0 12px;
    font-size: 13px;
  }
  /* ステータスは「ご案内をお待ちください」が 1 行に収まる幅にする */
  main .sr_training_row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 4px 8px;
  }
  main .sr_training_dates,
  main .sr_training_title {
    grid-column: 2 / -1;
  }
  main .sr_training_status {
    min-width: 120px;
  }
  main .sr_fav_tab {
    min-width: 0;
    flex: 1;
  }
  main .sr_fav_tabs li {
    flex: 1;
  }
  main .sr_profile_form .sr_apply_row {
    grid-template-columns: 1fr;
  }
  main .sr_profile_checks_2col,
  main .sr_profile_hours {
    grid-template-columns: 1fr;
  }
  main .sr_profile_badge,
  main .sr_profile_button {
    min-width: 0;
    flex: 1;
    padding: 0 12px;
    font-size: 15px;
  }
  /* 「公開状態：公開中」が折り返さないよう、字間を詰めて文字の幅に合わせる */
  main .sr_profile_actions {
    gap: 8px;
  }
  main .sr_profile_badge {
    flex: 0 0 auto;
    padding: 0 8px;
    letter-spacing: 0.02em;
  }
  main .sr_profile_badge,
  main .sr_profile_button {
    white-space: nowrap;
  }
  main .sr_profile_sns_row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  main .sr_profile_hours_time > span:first-child {
    flex-basis: 100%;
  }
  main .sr_profile_rules_title {
    font-size: 17px;
    letter-spacing: 0.05em;
  }
  main .sr_profile_rules_body {
    max-height: 55vh;
    padding: 16px;
    font-size: 14px;
  }
  main .sr_profile_rules_agree {
    width: 100%;
    min-width: 0;
    font-size: 15px;
    letter-spacing: 0.05em;
  }
}

/* プロフィールのプレビュー。会員個人ページの部品は画面幅 (vw) で幅を決めているため、タブの枠に収める */
main .sr_profile_preview .member_profile {
  padding: 1.667vw 0 2.083vw;
}
main .sr_profile_preview .sr_member_preview_office {
  padding: 0 0.833vw 1.25vw;
}
main .sr_profile_preview .member_profile .member_profile_card {
  width: auto;
  max-width: none;
  margin-inline: clamp(12px, 2vw, 40px);
  padding: 32px clamp(16px, 3vw, 56px);
}
/* 「新規受け入れ可否」の線は、Figma のとおり白の枠と同じ幅にする */
main .sr_profile_preview .member_profile .member_accept {
  width: auto;
  max-width: none;
  margin-inline: clamp(12px, 2vw, 40px);
}
main .sr_profile_preview .member_info {
  padding: 1.25vw 0 1.667vw;
}
main .sr_profile_preview .member_info .member_info_list {
  width: auto;
  margin-inline: clamp(12px, 2vw, 40px) !important;
}
/* 項目名の列は画面幅 (12.34vw) で決まり、タブの枠の中では「郵便番号／事務所所在地」が 2 行に割れるので広げる */
@media screen and (min-width: 768px) {
  main .sr_profile_preview .member_info .member_info_row {
    grid-template-columns: max(172px, 11.979vw) 1fr;
  }
}

/* ----------------------------------------------------------------
   会員ページの書類 (書式・事業・会議予定・組織・定款・資料)、電子ブック、クラウド入力申請
   Figma: 地 #F5F7F6 の枠に、書類ごとに下線で区切って並べる。ボタンは青の枠線 (会員ページ　デザインパーツ)
   ---------------------------------------------------------------- */
main .sr_mypage_lead {
  margin-top: 0.833vw;
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #333333;
}
main .sr_doc_panel {
  margin: 1.667vw 0 0;
  padding: 24px clamp(16px, 5vw, 76px) 40px;
  background-color: #f5f7f6;
  list-style: none;
}
main .sr_doc_items {
  margin: 0;
  padding: 0;
  list-style: none;
}
main .sr_doc {
  padding: 1.25vw 0;
  border-bottom: 1px solid #cccccc;
}
main .sr_doc_head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0.729vw;
}
main .sr_doc_title {
  font-size: clamp(14px, 0.885vw, 17px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000000;
}
main .sr_doc_target,
main .sr_doc_tag {
  display: inline-block;
  padding: 1px 0.625vw;
  font-size: clamp(12px, 0.729vw, 14px);
  letter-spacing: 0.1em;
  line-height: 1.6;
}
main .sr_doc_target_orange {
  background-color: #c27d1e;
  color: #ffffff;
}
main .sr_doc_target_green {
  background-color: #1f9e6e;
  color: #ffffff;
}
main .sr_doc_target_purple {
  background-color: #8b4bb1;
  color: #ffffff;
}
/* 事務局が管理画面で足した対象の既定の色 (2026-10-30 依頼) */
main .sr_doc_target_blue {
  background-color: #183cb6;
  color: #ffffff;
}
main .sr_doc_tag {
  border: 2px solid #b8172c;
  color: #b8172c;
}
main .sr_doc_note {
  margin-top: 8px;
  font-size: clamp(12px, 0.781vw, 15px);
  letter-spacing: 0.1em;
  color: #000000;
}
main .sr_doc_note_red {
  color: #e60033;
}
main .sr_doc_body {
  margin-top: 0.521vw;
  font-size: clamp(12px, 0.781vw, 15px);
  line-height: 1.8;
  letter-spacing: 0.05em;
}
main .sr_doc_body p + p {
  margin-top: 0.6em;
}
/* 支給 CSS の ul { margin: 0 !important } で上の余白が消えるため、!important で戻す */
main .sr_doc_buttons,
main .sr_ebook_buttons,
main .sr_cloud_files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625vw 0.833vw;
  margin: 1.042vw 0 0 !important;
  padding: 0;
  list-style: none;
}
/* 注記 (「メール・FAX提出可」など) のすぐ下は、Figma のとおり詰める */
main .sr_doc_note + .sr_doc_buttons,
main .sr_doc_note + .sr_doc_backnumbers {
  margin-top: 0.625vw !important;
}
/* 会員ページのボタン。Figma「会員ページ　デザインパーツ」: 白地に青の枠線、青の文字と矢印 */
main .sr_doc_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.521vw;
  min-width: max(180px, 12.5vw);
  min-height: max(35px, 2.604vw);
  padding: 4px 1.25vw;
  border: 1px solid var(--sr-mypage-blue);
  border-radius: 2.604vw;
  background-color: #ffffff;
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--sr-mypage-blue);
}
main .sr_doc_button:hover {
  color: var(--sr-mypage-blue);
  background-color: #eef1fb;
  opacity: 1;
}
main .sr_doc_button .sr_button_arrow {
  flex-shrink: 0;
}
/* button 要素のボタン (パスワード変更・クラウド入力申請) にも同じ見た目を当てる */
main button.sr_doc_button {
  font-family: inherit;
  cursor: pointer;
}
/* 会員ページの画面の下に並べるボタン (戻る・変更する、一覧へ戻る など) */
main .sr_mypage_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625vw 1.042vw;
  margin-top: 2.083vw;
}
/* 見出しを隠した会員ページTOP では、タブを上に詰める */
main .sr_mypage_title.sr_only + .sr_mypage_tabs {
  margin-top: 0;
}
main .sr_ebook_group + .sr_ebook_group {
  margin-top: 1.875vw;
}
main .sr_ebook_group_title {
  padding-top: 0.833vw;
  font-size: clamp(14px, 0.885vw, 17px);
  font-weight: 700;
  letter-spacing: 0.1em;
}
main .sr_ebook_buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.833vw 1.667vw;
}
main .sr_ebook_button {
  display: flex;
  width: 100%;
  min-height: max(36px, 2.708vw);
  font-size: clamp(14px, 0.885vw, 17px);
}
main .sr_ebook_embed {
  margin-top: 0.833vw;
}
main .sr_ebook_embed iframe {
  display: block;
  width: 100%;
  min-height: 70vh;
  border: 0;
}
main .sr_cloud_closed,
main .sr_cloud_text {
  padding-top: 0.833vw;
  font-size: clamp(14px, 0.885vw, 17px);
  line-height: 1.8;
  letter-spacing: 0.05em;
}
main .sr_cloud_term {
  margin-top: 8px;
  font-size: clamp(13px, 0.833vw, 16px);
}
main .sr_cloud_form {
  max-width: 33.333vw;
  margin-top: 0.833vw;
}
main .sr_cloud_files {
  flex-direction: column;
}
main .sr_cloud_file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0.833vw;
}
main .sr_cloud_date {
  font-size: clamp(12px, 0.781vw, 15px);
  letter-spacing: 0.05em;
}

@media screen and (max-width: 767px) {
  main .sr_mypage_lead {
    font-size: 15px;
  }
  main .sr_doc_button {
    min-width: 0;
    width: 100%;
  }
  main .sr_doc_buttons li,
  main .sr_cloud_file {
    width: 100%;
  }
  main .sr_doc_buttons,
  main .sr_ebook_buttons,
  main .sr_cloud_files,
  main .sr_doc_backnumbers {
    margin-top: 16px !important;
  }
  main .sr_doc_note + .sr_doc_buttons,
  main .sr_doc_note + .sr_doc_backnumbers {
    margin-top: 12px !important;
  }
  main .sr_ebook_buttons {
    grid-template-columns: 1fr;
  }
  /* 「ソフトウェアダウンロード画面へ」は長く、字間 0.2em のままだと 2 行に割れて高さ 60px の枠からはみ出す */
  main .sr_cloud_form .sr_apply_button {
    width: 100%;
    min-width: 0;
    font-size: 16px;
    letter-spacing: 0.05em;
  }
}

/* ----------------------------------------------------------------
   書類の NEW・バックナンバー・表紙画像 (資料ページの「愛知中央SRたより バックナンバー」)
   Figma: NEW は赤地に白字。バックナンバーのボタンは縦に並べ、NEW はボタンの右。
   表紙画像は右に置き、下に「大きい画像で見る」
   ---------------------------------------------------------------- */
main .sr_doc_new {
  display: inline-block;
  min-width: max(64px, 4.479vw);
  padding: 1px 0.625vw;
  background-color: #f0143c;
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  color: #ffffff;
}
main .sr_doc_main.has_cover {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25vw 2.083vw;
}
main .sr_doc_content {
  flex: 1 1 auto;
  min-width: 0;
}
main .sr_doc_backnumbers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.521vw;
  margin: 1.042vw 0 0 !important; /* 支給 CSS の ul のリセットより優先する */
  padding: 0;
  list-style: none;
}
main .sr_doc_backnumbers li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0.625vw;
}
main .sr_doc_cover {
  flex: 0 0 200px;
  margin-top: 0.833vw;
  text-align: center;
}
main .sr_doc_cover img {
  display: block;
  width: 100%;
  height: auto;
}
main .sr_doc_cover_link {
  display: inline-flex;
  align-items: center;
  gap: 0.521vw;
  margin-top: 0.729vw;
  font-size: clamp(12px, 0.781vw, 15px);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #000000;
}
main .sr_doc_cover_link:hover {
  color: #000000;
}

@media screen and (max-width: 767px) {
  main .sr_doc_main.has_cover {
    flex-direction: column;
    align-items: stretch;
  }
  main .sr_doc_backnumbers li {
    width: 100%;
  }
  main .sr_doc_backnumbers .sr_doc_button {
    flex: 1 1 auto;
    width: auto;
  }
  main .sr_doc_cover {
    flex-basis: auto;
    width: min(240px, 100%);
    margin-inline: auto;
  }
}

/* ----------------------------------------------------------------
   研修一覧の「申し込み情報を確認する」と、申し込み情報確認
   Figma「会員ページ：研修一覧」「会員ページ：研修申し込み情報確認」: ボタンは青の枠線 (会員ページ　デザインパーツ)
   ---------------------------------------------------------------- */
/* ボタンはタイトルの下。タイトルが詰まらない広さがあれば行の右端に並べる */
main .sr_training_application {
  grid-column: 5;
  justify-self: start;
  min-width: 0;
  min-height: max(28px, 2.083vw);
  padding: 2px 1.042vw;
  font-size: clamp(12px, 0.781vw, 15px);
  white-space: nowrap;
}
@media screen and (min-width: 1600px) {
  main .sr_training_row_applied {
    grid-template-columns: max(24px, 1.667vw) max(75px, 5.208vw) max(128px, 8.854vw) max(150px, 7.812vw) 1fr auto;
  }
  main .sr_training_application {
    grid-column: auto;
  }
}
main .sr_application_title {
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  color: #000000;
}
main .sr_application_summary {
  margin-top: 1.25vw;
  padding: 40px clamp(16px, 3vw, 56px);
  border-radius: 1.042vw;
  background-color: #ffffff;
}
main .sr_application_name {
  font-size: clamp(14px, 0.885vw, 17px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #000000;
}
main .sr_application_body {
  margin-top: 1.042vw;
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #333333;
}
main .sr_application_body p + p {
  margin-top: 0.6em;
}
main .sr_application_body a {
  text-decoration: underline;
}
main .sr_application_table {
  margin: 0.833vw 0 0;
}
main .sr_application_row {
  display: grid;
  grid-template-columns: minmax(140px, 24%) 1fr;
  align-items: center;
  gap: 4px 1.25vw;
  padding: 0.625vw 0;
  border-bottom: 1px solid #cccccc;
}
main .sr_application_row dt {
  font-size: clamp(12px, 0.781vw, 15px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000000;
}
main .sr_application_row dd {
  margin: 0;
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #333333;
  word-break: break-all;
}
main .sr_application_attendee {
  margin-top: 1.667vw;
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sr-navy);
}
main .sr_application_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625vw 1.042vw;
  margin-top: 1.458vw;
}
main .sr_application_buttons .sr_doc_button {
  min-width: max(180px, 12.5vw);
  font-size: clamp(12px, 0.781vw, 15px);
}
main .sr_application_note {
  margin-top: 0.625vw;
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.7;
  text-align: center;
  color: #555555;
}
main .sr_apply_add {
  margin-top: 1.25vw;
  padding: 0.625vw 0.833vw;
  border-left: 4px solid var(--sr-navy);
  background-color: var(--sr-gray-bg);
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--sr-navy);
}

@media screen and (max-width: 767px) {
  main .sr_training_application {
    grid-column: 2 / -1;
    justify-self: start;
  }
  main .sr_application_summary {
    padding: 24px 16px;
    border-radius: 12px;
  }
  main .sr_application_row {
    grid-template-columns: 1fr;
  }
  main .sr_application_buttons .sr_doc_button {
    width: 100%;
  }
}

/* ----------------------------------------------------------------
   お気に入りのお知らせ (ポップアップ)。wp_footer に出すため main の外
   Figma「会員ページ：お気に入りポップアップ」: 枠 #F4F4F4 / 中に白の角丸の枠 / 右上に「閉じる」
   ---------------------------------------------------------------- */
.sr_popup {
  position: fixed;
  width: min(650px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 64px clamp(20px, 5vw, 52px) 44px;
  border: 0;
  background-color: #f4f4f4;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  color: #333333;
  overflow-y: auto;
}
/* 開いたときはポップアップ自身にフォーカスを置く (js/sr-favorite-notices.js)。枠に線は出さない */
.sr_popup:focus {
  outline: none;
}
.sr_popup::backdrop {
  background-color: rgba(255, 255, 255, 0.7);
}
.sr_popup_close_form {
  position: absolute;
  top: 0.833vw;
  right: 0.833vw;
  margin: 0;
}
.sr_popup_close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 0;
  background: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #333333;
  cursor: pointer;
}
.sr_popup_close span {
  font-size: 11px; /* 支給 CSS の * { font-size: 16px; line-height: 2 } が span にも掛かるため */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: inherit;
}
.sr_popup_close:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--sr-navy);
  outline-offset: 2px;
}
.sr_popup_title {
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  color: #333333;
}
.sr_popup_lead {
  margin-top: 1.875vw;
  font-size: clamp(12px, 0.781vw, 15px);
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: center;
}
/* dl は支給 CSS の dl { margin: 0 !important; padding: 0 !important } で余白が消えるため、!important で戻す */
.sr_popup .sr_popup_box {
  margin: 1.667vw 0 0 !important;
  padding: 1.458vw 1.458vw 1.562vw !important;
  border-radius: 1.042vw;
  background-color: #ffffff;
}
.sr_popup_row {
  display: grid;
  grid-template-columns: max(75px, 5.208vw) 1fr;
  gap: 4px 0.625vw;
}
.sr_popup_row + .sr_popup_row {
  margin-top: 1.042vw;
}
.sr_popup_row dt {
  font-size: clamp(12px, 0.781vw, 15px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000000;
}
.sr_popup_row dd {
  margin: 0;
  padding-top: 2px;
  font-size: clamp(12px, 0.677vw, 13px);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #333333;
}

@media screen and (max-width: 767px) {
  /* 「閉じる」(高さ約 60px) の下から見出しを始め、重ならないようにする */
  .sr_popup {
    padding: 80px 16px 28px;
  }
  .sr_popup_close_form {
    top: 12px;
    right: 12px;
  }
  .sr_popup_title {
    font-size: 17px;
  }
  .sr_popup_lead {
    margin-top: 20px;
    font-size: 14px;
    letter-spacing: 0.05em;
  }
  .sr_popup_lead br {
    display: none;
  }
  .sr_popup .sr_popup_box {
    margin-top: 24px !important;
    padding: 20px 16px !important;
    border-radius: 12px;
  }
  .sr_popup_row {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------
   研修詳細の添付ファイルのボタン (inc/attachments.php の sr_the_training_buttons())
   事務局の依頼 (2026-10-14「反映画面.png」): 紺地に白文字、右に白地の矢印。記事送りの「一覧に戻る」(支給 CSS の post_back_btn) と同じ見た目
   ---------------------------------------------------------------- */
/* 支給 CSS の本文の ul の字下げ・行頭記号を消す */
main .post_body .sr_training_files {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
main .post_body .sr_training_files li {
  margin: 0;
  list-style: none;
}
main .post_body .sr_training_file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 295px;
  max-width: 100%;
  padding: 12px 18px 12px 20px;
  border: 1px solid #183cb6;
  background-color: #183cb6;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease;
}
/* 支給 CSS の * { color; font-size; line-height } が中の span に効いて黒字になるので、ボタンの指定を引き継がせる */
main .post_body .sr_training_file_text {
  min-width: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  word-break: break-all;
}
main .post_body .sr_training_file_arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 30px;
  background-color: #ffffff;
  transition: background-color 0.4s ease;
}
main .post_body .sr_training_file_arrow svg {
  display: block;
  width: 26px;
  height: auto;
}
main .post_body .sr_training_file_arrow path {
  fill: #183cb6;
  transition: fill 0.4s ease;
}
@media (hover: hover) {
  main .post_body .sr_training_file:hover {
    background-color: #ffffff;
    color: #183cb6;
    opacity: 1;
  }
  main .post_body .sr_training_file:hover .sr_training_file_arrow {
    background-color: #183cb6;
  }
  main .post_body .sr_training_file:hover .sr_training_file_arrow path {
    fill: #ffffff;
  }
}
@media screen and (max-width: 767px) {
  main .post_body .sr_training_files li,
  main .post_body .sr_training_file {
    width: 100%;
  }
}

/* ----------------------------------------------------------------
   営業時間／休業日の選択 (プロフィール編集)。選べるのは曜日ごとに 1 つ (ラジオボタン) のまま、
   見た目だけチェックボックスにする (事務局の依頼 2026-10-15「〇と〇が並んでわかりにくい」)
   ---------------------------------------------------------------- */
main .sr_profile_hours_day input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid #767676;
  border-radius: 2px;
  background-color: #ffffff;
  cursor: pointer;
  vertical-align: middle;
}
main .sr_profile_hours_day input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -3px;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  transform: rotate(-45deg);
  visibility: hidden;
}
main .sr_profile_hours_day input[type="radio"]:checked {
  border-color: var(--sr-navy);
  background-color: var(--sr-navy);
}
main .sr_profile_hours_day input[type="radio"]:checked::before {
  visibility: visible;
}
main .sr_profile_hours_day input[type="radio"]:focus-visible {
  outline: 2px solid var(--sr-navy);
  outline-offset: 2px;
}