/* ============================================================
   授業スケジュール（/schedule/schedule.html 専用）
   色・書体は css/gajyuku-nav.css のトークン（--gaj-*）を使う
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--gaj-black); font-family: var(--gaj-font); }
.display_none { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.sc {
  --sc-accent: var(--gaj-orange);
  --sc-accent-soft: rgba(255,106,0,0.14);
  --sc-accent-ink: #c24f00;
  --sc-line: var(--gaj-gray-light);
  --sc-muted: var(--gaj-gray-mid);
  --sc-ink-2: var(--gaj-gray-dark);
  --sc-bg-2: var(--gaj-sub-bg);
  --sc-sun: #d64545;
  --sc-sat: #3a78c2;
  --sc-radius: 14px;
  max-width: 1240px; margin: 0 auto;
  padding: calc(var(--gaj-gh-h-sp) + 28px) 16px 72px;
  box-sizing: border-box;
}
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
@media (min-width: 960px) {
  .sc { padding: calc(var(--gaj-gh-h-pc) + var(--gaj-gn-h) + 48px) 32px 96px; }
}

/* ---- Hero ---- */
.sc-hero { margin-bottom: 28px; }
.sc-eyebrow { margin: 0 0 10px; font-size: 11px; letter-spacing: .22em; color: var(--sc-accent); font-weight: 600; }
.sc-hero h1 { margin: 0; font-size: clamp(26px, 4.2vw, 40px); line-height: 1.25; letter-spacing: .02em; font-weight: 700; }
.sc-lead { margin: 12px 0 0; font-size: 14px; line-height: 1.8; color: var(--sc-ink-2); }

/* ---- Layout ---- */
.sc-layout { display: grid; gap: 28px; }
@media (min-width: 1040px) {
  .sc-layout { grid-template-columns: 330px minmax(0, 1fr); gap: 40px; align-items: start; }
  .sc-side { position: sticky; top: calc(var(--gaj-gh-h-pc) + var(--gaj-gn-h) + 24px); }
}

/* ---- Controls ---- */
.sc-field { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.sc-label { display: block; margin: 0 0 8px; font-size: 11px; letter-spacing: .14em; color: var(--sc-muted); font-weight: 600; }
/* ドロップダウン：開いたリストは OS 標準（ダークモードで黒くなる）ではなく、
   サイトのナビのドロップダウン（css/gajyuku-nav.css の .gn__sub）と同じ見た目で自前描画する。
   値の正本は隠した <select>。16px 未満だと iPhone がタップ時に拡大するのでボタンの文字は 16px。 */
.sc-select { position: relative; }
.sc-select.is-enhanced select { display: none; }
.sc-select-btn {
  appearance: none; position: relative; display: flex; align-items: center; width: 100%; min-height: 50px; margin: 0;
  padding: 0 44px 0 16px; border: 1px solid var(--sc-line); border-radius: 10px; background: #fff;
  font: inherit; font-size: 16px; font-weight: 400; letter-spacing: .03em; color: var(--gaj-black); text-align: left;
  cursor: pointer; transition: border-color var(--gaj-dur), box-shadow var(--gaj-dur);
}
.sc-select-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-select-btn svg { position: absolute; right: 18px; top: 50%; margin-top: -4px; color: var(--gaj-gray-dark); transition: transform .24s cubic-bezier(.4,0,.2,1); }
.sc-select.is-set .sc-select-btn { border-color: var(--gaj-gray-mid); }
.sc-select.is-empty .sc-select-btn { color: var(--sc-muted); }
.sc-select-btn:hover { border-color: var(--sc-accent); }
.sc-select-btn:focus-visible { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px rgba(255,106,0,.16); }
.sc-select.is-open .sc-select-btn { border-color: var(--sc-accent); }
.sc-select.is-open .sc-select-btn svg { transform: rotate(180deg); }
.sc-list {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 8px 0; list-style: none;
  max-height: min(56vh, 380px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--gaj-gray-light); border-top: 2px solid var(--gaj-orange);
  border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
.sc-list:focus { outline: none; }
.sc-list [role="option"] {
  position: relative; padding: 10px 40px 10px 20px; font-size: 14px; letter-spacing: .04em; line-height: 1.5;
  color: var(--gaj-gray-dark); cursor: pointer;
  transition: color var(--gaj-dur), padding-left var(--gaj-dur) var(--gaj-ease), background var(--gaj-dur);
}
.sc-list [role="option"].is-active { color: var(--gaj-orange); background: var(--gaj-orange-tint); padding-left: 26px; }
.sc-list [role="option"][aria-selected="true"] { color: var(--gaj-orange); font-weight: 500; }
.sc-list [role="option"][aria-selected="true"]::after {
  content: ''; position: absolute; right: 18px; top: 50%; width: 5px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.sc-list [role="option"][aria-disabled="true"] { color: #c4c4c4; cursor: default; background: none; padding-left: 20px; }
.sc-list .sc-list-group {
  padding: 10px 20px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--gaj-gray-mid);
  border-top: 1px solid var(--gaj-gray-light); margin-top: 4px; cursor: default;
}
.sc-list .sc-list-group:first-child { border-top: none; margin-top: 0; }
.sc-notice { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--sc-accent-soft); color: var(--sc-accent-ink); font-size: 12.5px; line-height: 1.6; }
.sc-notice:empty { display: none; }
.sc-seg button:focus-visible, .sc-day:focus-visible, .sc-btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

.sc-seg { display: inline-flex; padding: 3px; border-radius: 20px; background: #f2f2f2; }
.sc-seg button {
  appearance: none; border: 0; font: inherit; cursor: pointer;
  min-height: 32px; padding: 0 18px; border-radius: 17px; background: transparent;
  font-size: 13px; color: var(--sc-ink-2); transition: background var(--gaj-dur), color var(--gaj-dur), box-shadow var(--gaj-dur);
}
.sc-seg button[aria-checked="true"] { background: #fff; color: var(--gaj-black); box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 600; }
.sc-seg button:disabled { cursor: not-allowed; color: #bdbdbd; }
.sc-hint { margin: 8px 0 0; font-size: 12px; color: var(--sc-muted); line-height: 1.6; }

/* ---- Summary card ---- */
.sc-card { border: 1px solid var(--sc-line); border-radius: var(--sc-radius); padding: 20px; background: #fff; }
.sc-card-title { margin: 0; font-size: 13px; color: var(--sc-ink-2); letter-spacing: .04em; }
.sc-next-label { margin: 16px 0 2px; font-size: 11px; letter-spacing: .14em; color: var(--sc-muted); font-weight: 600; }
.sc-next { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: .01em; line-height: 1.3; }
.sc-next small { font-size: 14px; font-weight: 500; color: var(--sc-ink-2); margin-left: 6px; }
.sc-next-sub { margin: 4px 0 0; font-size: 13px; color: var(--sc-accent-ink); }
.sc-stats { display: flex; gap: 22px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--sc-line); }
.sc-stat b { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sc-stat span { font-size: 11px; color: var(--sc-muted); letter-spacing: .08em; }
.sc-times { margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.9; color: var(--sc-ink-2); }
.sc-times li { display: flex; gap: 12px; }
.sc-times time { font-variant-numeric: tabular-nums; color: var(--gaj-black); min-width: 92px; }
.sc-times li.is-off, .sc-times li.is-off time { color: #b5b5b5; }
.sc-tag { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 9px; border: 1px solid currentColor; font-style: normal; font-size: 10.5px; line-height: 17px; letter-spacing: .04em; color: var(--sc-accent-ink); vertical-align: 1px; }
.sc-times li.is-off .sc-tag { color: var(--sc-ink-2); }
.sc-year.is-prog .sc-notes-m, .sc-year.is-prog .sc-day.is-hopen .sc-dnum::before, .sc-year.is-prog .sc-day.is-exh .sc-dnum::after { display: none; }
.sc-week { width: 100%; margin: 14px 0 0; border-collapse: collapse; font-size: 12.5px; }
.sc-week th { width: 32px; padding: 7px 0; text-align: left; font-weight: 600; vertical-align: top; }
.sc-week td { padding: 7px 0; color: var(--sc-ink-2); line-height: 1.6; border-top: 1px solid #f3f3f3; }
.sc-week th { border-top: 1px solid #f3f3f3; }
.sc-week tr:first-child th, .sc-week tr:first-child td { border-top: 0; }
.sc-week .is-off { color: #c4c4c4; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.sc-btn {
  appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--sc-line); background: #fff;
  font-size: 12.5px; color: var(--gaj-black); text-decoration: none; transition: border-color var(--gaj-dur), color var(--gaj-dur), background var(--gaj-dur);
}
.sc-btn:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
.sc-btn--primary { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff !important; }
.sc-btn--primary:hover { background: var(--gaj-orange-hover); border-color: var(--gaj-orange-hover); color: #fff; }
.sc-empty { margin: 10px 0 0; font-size: 14px; line-height: 1.8; color: var(--sc-ink-2); }

/* ---- Legend ---- */
.sc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 12px; color: var(--sc-ink-2); }
.sc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sc-key { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-variant-numeric: tabular-nums; }
.sc-key--lesson { background: var(--sc-accent); color: #fff; }
.sc-key--soft { background: var(--sc-accent-soft); color: var(--sc-accent-ink); }
.sc-key--closed { color: #bdbdbd; text-decoration: line-through; }
.sc-key--today { box-shadow: inset 0 0 0 1.5px var(--gaj-black); }
.sc-key--exh { color: var(--sc-accent); font-size: 13px; }

/* ---- Year grid ---- */
.sc-year { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .sc-year { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1040px) { .sc-year { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
/* 月のカレンダーは白い背景に溶けないよう、左の要約カード（.sc-card）と同じ細い枠で囲む */
.sc-month { min-width: 0; padding: 12px 8px 10px; border: 1px solid var(--sc-line); border-radius: 12px; background: #fff; }
@media (min-width: 640px) { .sc-month { padding: 16px 14px 14px; } }
.sc-month-head { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; padding: 0 2px; }
.sc-month-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.sc-month-head span { font-size: 11px; color: var(--sc-muted); letter-spacing: .06em; }
.sc-month-head .sc-count { margin-left: auto; font-size: 11px; color: var(--sc-accent-ink); letter-spacing: .02em; }
.sc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.sc-dow { text-align: center; font-size: 10px; color: var(--sc-muted); padding: 0 0 4px; }
.sc-dow.is-sat { color: var(--sc-sat); } .sc-dow.is-sun { color: var(--sc-sun); }
/* 日付セル：.sc-day がマス、.sc-dnum が日付の丸（状態の色はこちらに付ける）、.sc-cap は月ごと表示の説明 */
.sc-day {
  appearance: none; border: 0; background: none; font: inherit; padding: 0; margin: 0 auto;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: min(100%, 34px); aspect-ratio: 1 / 1; border-radius: 50%;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--gaj-black); cursor: default;
  transition: opacity .22s, background-color .22s var(--gaj-ease);
}
button.sc-day { cursor: pointer; }
.sc-dnum {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
  transition: background-color .22s var(--gaj-ease), color .22s var(--gaj-ease);
}
.sc-cap { display: none; }
.sc-day.is-sun .sc-dnum { color: var(--sc-sun); } .sc-day.is-sat .sc-dnum { color: var(--sc-sat); }
.sc-day.is-lesson .sc-dnum { background: var(--sc-accent); color: #fff; font-weight: 600; }
.sc-day.is-soft .sc-dnum { background: var(--sc-accent-soft); color: var(--sc-accent-ink); }
.sc-day.is-closed .sc-dnum { color: #c4c4c4; text-decoration: line-through; text-decoration-color: #d9d9d9; }
.sc-day.is-exh .sc-dnum::after { content: '★'; position: absolute; top: -5px; right: -3px; font-size: 10px; font-weight: 400; color: var(--sc-accent); text-decoration: none; }
.sc-day.is-exh.is-lesson .sc-dnum::after { color: var(--gaj-black); }
.sc-day.is-hopen .sc-dnum::before { content: ''; position: absolute; top: 2px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--sc-sun); box-shadow: 0 0 0 1.5px #fff; }
.sc-day.is-today .sc-dnum { box-shadow: inset 0 0 0 1.5px var(--gaj-black); }
.sc-day.is-lesson.is-today .sc-dnum { box-shadow: inset 0 0 0 1.5px var(--gaj-black), inset 0 0 0 3px #fff; }
.sc-day.is-past { opacity: .38; }
.sc-day.is-pick { outline: 2px solid var(--gaj-black); outline-offset: 1px; }

/* ---- 表示切り替え（月ごと／年間）と月送り ---- */
.sc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 0 0 18px; }
.sc-toolbar .sc-legend { margin: 0; }
.sc-monthnav { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.sc-monthnav[hidden] { display: none; }
.sc-navbtn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--sc-line); background: #fff;
  color: var(--gaj-gray-dark); cursor: pointer; transition: border-color var(--gaj-dur), color var(--gaj-dur);
}
.sc-navbtn:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
.sc-navbtn:disabled { cursor: default; opacity: .35; border-color: var(--sc-line); color: var(--gaj-gray-dark); }
.sc-navbtn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.sc-monthnav-title { margin: 0; min-width: 7.5em; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sc-monthnav-title small { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--sc-accent-ink); letter-spacing: .02em; }
.sc-monthnav .sc-btn { margin-left: auto; }
.sc-monthnav .sc-btn:disabled { cursor: default; opacity: .4; border-color: var(--sc-line); color: var(--gaj-black); }

/* 月ごと表示：1か月を大きく、各日に短い説明（授業日12・祝日休講など）を出す */
.sc-year.is-month { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sc-year.is-month .sc-month { display: none; }
.sc-year.is-month .sc-month.is-current { display: block; }
.sc-year.is-month .sc-month-head { display: none; }
.sc-year.is-month .sc-month { padding: 16px 10px 14px; border-radius: var(--sc-radius); }
.sc-year.is-month .sc-grid { gap: 4px; }
.sc-year.is-month .sc-dow { font-size: 12px; padding: 0 0 8px; }
.sc-year.is-month .sc-day {
  width: 100%; aspect-ratio: auto; min-height: 64px; border-radius: 10px;
  justify-content: flex-start; gap: 4px; padding: 6px 0 5px;
}
.sc-year.is-month button.sc-day:hover { background: var(--sc-bg-2); }
.sc-year.is-month .sc-dnum { flex: none; width: 32px; height: 32px; font-size: 14px; }
.sc-year.is-month .sc-cap {
  display: block; max-width: 100%; padding: 0 2px; text-align: center;
  font-size: 9.5px; line-height: 1.25; letter-spacing: .01em; color: var(--sc-muted); word-break: keep-all; overflow-wrap: anywhere;
}
.sc-year.is-month .sc-day.is-lesson .sc-cap { color: var(--sc-accent-ink); font-weight: 600; }
.sc-year.is-month .sc-day.is-closed .sc-cap { color: #b5b5b5; }
.sc-year.is-month .sc-day.is-pick { outline-offset: -2px; }
.sc-year.is-month .sc-notes-m { margin-top: 14px; font-size: 12.5px; }
@media (min-width: 640px) {
  .sc-year.is-month .sc-month { padding: 20px 18px 18px; }
  .sc-year.is-month .sc-grid { gap: 6px; }
  .sc-year.is-month .sc-day { min-height: 78px; padding-top: 8px; }
  .sc-year.is-month .sc-dnum { width: 36px; height: 36px; font-size: 15px; }
  .sc-year.is-month .sc-cap { font-size: 11px; }
}
.sc-notes-m { margin: 8px 2px 0; padding: 0; list-style: none; font-size: 11px; line-height: 1.6; color: var(--sc-muted); }
.sc-notes-m li { display: flex; gap: 6px; }
.sc-notes-m b { font-weight: 500; color: var(--sc-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-month.is-pastmonth .sc-month-head h3 { color: var(--sc-muted); }

/* ---- Day popover ---- */
.sc-pop {
  position: absolute; z-index: 50; min-width: 168px; max-width: 240px; padding: 10px 12px;
  background: var(--gaj-black); color: #fff; border-radius: 10px; font-size: 12px; line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .14s var(--gaj-ease), transform .14s var(--gaj-ease);
}
.sc-pop.is-on { opacity: 1; transform: translateY(0); }
.sc-pop b { display: block; font-size: 13px; margin-bottom: 2px; }
.sc-pop span { display: block; color: rgba(255,255,255,.82); }

/* ---- Notes ---- */
.sc-info { margin: 56px 0 0; display: grid; gap: 28px; }
@media (min-width: 760px) { .sc-info { grid-template-columns: 1fr 1fr; gap: 40px; } }
.sc-info h2 { margin: 0 0 12px; font-size: 15px; letter-spacing: .04em; }
.sc-info dl { margin: 0; font-size: 13px; line-height: 1.8; }
.sc-info dt { font-weight: 600; margin-top: 10px; }
.sc-info dt:first-child { margin-top: 0; }
.sc-info dd { margin: 0; color: var(--sc-ink-2); }
.sc-info ul { margin: 0; padding-left: 1.1em; font-size: 13px; line-height: 1.8; color: var(--sc-ink-2); }
.sc-info li + li { margin-top: 6px; }
.sc-info a { color: var(--sc-accent-ink); }

/* ---- Footer（Library/nav_global_2.lbi を新デザインで表示） ---- */
.sc-footer { border-top: 1px solid var(--gaj-gray-light); background: var(--gaj-sub-bg); font-family: var(--gaj-font); }
.sc-footer-inner { max-width: 1240px; margin: 0 auto; padding: 32px 16px 40px; font-size: 12px; color: var(--gaj-gray-dark); }
@media (min-width: 960px) { .sc-footer-inner { padding: 36px 32px 44px; } }
.sc-footer #nav_footer { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 18px; padding: 0; list-style: none; }
.sc-footer #nav_footer p { margin: 0; }
.sc-footer #nav_footer a { color: var(--gaj-gray-dark); text-decoration: none; }
.sc-footer #nav_footer a:hover { color: var(--gaj-orange); }
.sc-footer .border, .sc-footer .clearfloat { display: none; }
.sc-footer .footer_address { margin: 0 0 12px; line-height: 1.8; }
.sc-footer .footer_address a { color: inherit; }
.sc-footer .sns { display: flex; gap: 10px; margin: 0 0 14px; }
.sc-footer .sns figure { margin: 0; }
.sc-footer .sns img { width: 22px; height: 22px; object-fit: contain; display: block; }
.sc-footer address { font-style: normal; color: var(--gaj-gray-mid); }
.sc-footer address p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .sc-day, .sc-dnum, .sc-navbtn, .sc-select-btn, .sc-select-btn svg, .sc-list [role="option"], .sc-pop, .sc-seg button { transition: none; }
}
@media print {
  .gh, .gn, .sc-controls, .sc-actions, .sc-footer, .sc-pop { display: none !important; }
  .sc { padding-top: 0; }
  .sc-layout { display: block; }
  .sc-year { grid-template-columns: repeat(4, 1fr); }
}