/* スケジュール page. The card, tables and calendars reuse the school page styles in style.css. */
.school-schedule__intro{margin-bottom:clamp(28px,4vw,44px)}
.school-schedule__lead{margin:0 0 clamp(18px,2.4vw,26px);font-weight:700;line-height:2}

/* School switcher: four equal buttons, two by two on phones. */
.school-schedule__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.school-schedule__tabs[hidden]{display:none}
.school-schedule__tabs [role="tab"]{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;min-height:64px;margin:0;padding:12px 14px;border:1px solid #000;border-radius:10px;background:#fff;color:#000;font:inherit;font-size:1.6rem;font-weight:900;line-height:1.5;text-align:center;word-break:keep-all;cursor:pointer;transition:background-color .2s cubic-bezier(.4,0,.2,1)}
.school-schedule__tabs [role="tab"][aria-selected="true"]{background:#000;color:#fff}
.school-schedule__tabs [role="tab"]:focus-visible{outline:2px solid #4d90fe;outline-offset:2px}
.school-schedule__tab-note{font-size:.85em}
@media (hover:hover){.school-schedule__tabs [role="tab"][aria-selected="false"]:hover{background:#f3f3f3}}

/* One school. */
.school-schedule__school+.school-schedule__school{margin-top:clamp(40px,6vw,64px)}
.school-schedule__school[hidden]{display:none}
.school-schedule__school:focus-visible{outline:2px solid #4d90fe;outline-offset:8px;border-radius:4px}
.school-schedule__school-head{margin-bottom:clamp(22px,3vw,32px);padding-bottom:clamp(16px,2vw,22px);border-bottom:2px solid #000}
.school-schedule__school-head h2{margin:0;font-size:clamp(2.4rem,2.6vw,3.2rem);line-height:1.5}
.school-schedule__classes{margin-top:6px;color:#555;font-size:clamp(1.4rem,1.2vw,1.5rem);font-weight:700;line-height:1.8}
.school-schedule__text{line-height:1.8}
.school-schedule .school-location-detail__section .price__list,
.school-schedule .school-location-detail__section .google-calendar{margin-top:16px}

/* Next steps: apply in red as on the school pages, then the school page itself. */
.school-schedule__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:880px;margin:0 auto}
.school-schedule__actions .btn-01{display:flex;align-items:center;justify-content:center;min-height:60px;padding:14px 16px;font-size:clamp(1.5rem,1.3vw,1.7rem)}
.school-schedule .school-schedule__actions .school-schedule__apply{background-color:#df0f3e;border-color:#df0f3e;color:#fff!important}
@media (hover:hover){.school-schedule .school-schedule__actions .school-schedule__apply:hover{background-color:#af0c31;border-color:#af0c31}}

@media (max-width:767.98px){
  .school-schedule__tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .school-schedule__tabs [role="tab"]{min-height:56px;padding:10px 8px;font-size:1.4rem}
  .school-schedule__tab-note{flex-basis:100%}
}
@media (max-width:575.98px){
  .school-schedule__actions{grid-template-columns:1fr;gap:12px}
  .school-schedule__actions .btn-01{min-height:56px}
}