/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer components {
  .text70 {
    color: #536375;
  }
  .text100 {
    color: #2D3743;
  }
  .text40blue {
    color: #7B8DA2;
  }
  .txt-13 {
    font-size: 13px;
    --tw-leading: 150%;
    line-height: 150%;
    color: #2D3743;
  }
  .txt-13-70 {
    font-size: 13px;
    --tw-leading: 150%;
    line-height: 150%;
    color: #536375;
  }
  .txt-15 {
    font-size: 15px;
    --tw-leading: 150%;
    line-height: 150%;
    color: #2D3743;
  }
  .txt-15-70 {
    font-size: 15px;
    --tw-leading: 150%;
    line-height: 150%;
    color: #536375;
  }
  .bgBlue5 {
    background-color: #FAFCFF;
  }
  .bgPrimary {
    background-color: #156AD1;
  }
  .bkgA {
    background-color: #EAF2FF;
  }
  .bgGradeBlue {
    background: linear-gradient(to left, #DEE8FC, #BDD1F8);
  }
  .shadowBlue {
    box-shadow: 0 0 24px color-mix(in srgb, #156AD1 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 24px color-mix(in oklab, var(--color-blue-700) 20%, transparent);
    }
  }
  .shadow20 {
    box-shadow: 0 0 24px rgba(118, 131, 158, 0.2);
  }
  .shadowLight {
    box-shadow: 0 0 16px color-mix(in srgb, #156AD1 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 16px color-mix(in oklab, var(--color-blue-700) 10%, transparent);
    }
  }
}
@layer components {
  .routeNavWrap {
    margin-inline: auto;
    margin-top: calc(var(--spacing, 0.25rem) * 10);
    margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  }
  .routeNav {
    display: flex;
    flex-wrap: nowrap;
    gap: calc(var(--spacing, 0.25rem) * 4);
    overflow-x: auto;
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    white-space: nowrap;
    @media (width >= 48rem) {
      flex-wrap: wrap;
    }
    @media (width >= 48rem) {
      overflow: visible;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing, 0.25rem) * 10);
    }
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing, 0.25rem) * 20);
    }
  }
  .routeNavNoScroll {
    display: flex;
    flex-wrap: nowrap;
    gap: calc(var(--spacing, 0.25rem) * 4);
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    @media (width >= 48rem) {
      flex-wrap: wrap;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing, 0.25rem) * 10);
    }
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing, 0.25rem) * 20);
    }
  }
  .routeNavItem {
    width: 47%;
    flex-shrink: 0;
    @media (width >= 48rem) {
      width: fit-content;
    }
  }
  .routeNavLink {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing, 0.25rem) * 3);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white, #fff);
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
    padding-block: 10px;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: #2D3743;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:hover {
      @media (hover: hover) {
        opacity: 95%;
      }
    }
    @media (width >= 48rem) {
      width: fit-content;
    }
  }
  .routeNavLinkActive {
    background-color: var(--color-blue-700, #156AD1);
    color: var(--color-white, #fff);
  }
  .routeNavIcon {
    flex-shrink: 0;
  }
  .routeNavText {
    font-size: 15px;
    --tw-tracking: var(--tracking-wide, 0.025em);
    letter-spacing: var(--tracking-wide, 0.025em);
  }
  .routeNavLinkActive .routeNavText {
    color: var(--color-white, #fff);
  }
}
@layer utilities {
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@layer components {
  .tabTeacherBtn {
    display: block;
    height: 100%;
    width: 100%;
    background-color: #FAFCFF;
    text-align: center;
    --tw-font-weight: var(--font-weight-medium, 500);
    font-weight: var(--font-weight-medium, 500);
    color: #7B8DA2;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50, #E4F1FB);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700, #156AD1);
      }
    }
  }
  .activeTeacherTab {
    height: 100%;
    background-color: #B8DDFF;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-blue-700, #156AD1);
  }
  .cardTeachers {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing, 0.25rem) * 6);
    border-radius: var(--radius-lg, 0.5rem);
    background-color: #FAFCFF;
    padding: calc(var(--spacing, 0.25rem) * 4);
    --tw-shadow: 0 0 16px var(--tw-shadow-color, color-mix(in srgb,#156AD1 10%,transparent));
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow: 0 0 16px var(--tw-shadow-color, color-mix(in oklab,var(--color-blue-700) 10%,transparent));
    }
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      padding: calc(var(--spacing, 0.25rem) * 6);
    }
  }
  .cardTeacherImage {
    height: auto;
    width: 100%;
    flex-shrink: 0;
    border-radius: var(--radius-lg, 0.5rem);
    object-fit: cover;
    @media (width >= 48rem) {
      width: calc(2 / 5 * 100%);
    }
  }
  .cardTeacherBody {
    display: flex;
    flex-direction: column;
  }
  .cardTeacherTitle {
    padding-bottom: calc(var(--spacing, 0.25rem) * 4);
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-blue-700, #156AD1);
  }
  .cardTeacherDescription {
    font-size: 13px;
    --tw-leading: 1.75;
    line-height: 1.75;
    --tw-font-weight: var(--font-weight-medium, 500);
    font-weight: var(--font-weight-medium, 500);
    color: #2D3743;
  }
  .cardTeacherLink {
    margin-top: calc(var(--spacing, 0.25rem) * 4);
    text-align: right;
    font-size: 13px;
    --tw-font-weight: var(--font-weight-medium, 500);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-blue-700, #156AD1);
  }
  .cardMovies {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 10);
    border-radius: var(--radius-lg, 0.5rem);
    padding: calc(var(--spacing, 0.25rem) * 6);
    --tw-shadow: 0 0 24px var(--tw-shadow-color, rgba(118,131,158,0.2));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing, 0.25rem) * 6);
    }
  }
  .cardMoviesImg {
    height: auto;
    width: 100%;
    border-radius: var(--radius-sm, 0.25rem);
    object-fit: cover;
    @media (width >= 48rem) {
      width: 32%;
    }
  }
  .cardMoviesBody {
    width: 100%;
    flex: 1;
  }
  .cardMoviesHeader {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing, 0.25rem) * 4);
    padding-bottom: calc(var(--spacing, 0.25rem) * 6);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing, 0.25rem) * 0);
    }
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing, 0.25rem) * 4);
    }
  }
  .cardMoviesHeaderNoButton {
    align-items: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 4);
    padding-bottom: calc(var(--spacing, 0.25rem) * 6);
    @media (width >= 48rem) {
      gap: calc(var(--spacing, 0.25rem) * 0);
    }
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing, 0.25rem) * 4);
    }
  }
  .cardMoviesTitle {
    font-size: var(--text-xl, 1.25rem);
    line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: #2D3743;
  }
  .cardMoviesBtn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing, 0.25rem) * 2);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #FF3D00;
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
    padding-block: 13px;
    font-size: 13px;
    --tw-font-weight: var(--font-weight-semibold, 600);
    font-weight: var(--font-weight-semibold, 600);
    color: #FF3D00;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-orange-50, #FFEAE3);
      }
    }
    @media (width >= 48rem) {
      width: fit-content;
    }
  }
  .cardMoviesList {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: calc(var(--spacing, 0.25rem) * 2);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing, 0.25rem) * 12);
    }
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing, 0.25rem) * 4);
    }
  }
  .cardMoviesListColumn {
    gap: calc(var(--spacing, 0.25rem) * 3);
  }
  .cardMoviesListColumn a {
    display: block;
    gap: calc(var(--spacing, 0.25rem) * 2);
    padding-top: calc(var(--spacing, 0.25rem) * 2);
    font-size: 13px;
    --tw-font-weight: var(--font-weight-medium, 500);
    font-weight: var(--font-weight-medium, 500);
    color: #2D3743;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700, #156AD1);
      }
    }
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing, 0.25rem) * 0);
    }
  }
  .cardMoviesListColumn a + a {
    margin-top: calc(var(--spacing, 0.25rem) * 2);
  }
  .cardMoviesList a span {
    margin-right: calc(var(--spacing, 0.25rem) * 1);
  }
  .stepCards {
    width: 100%;
    text-align: left;
  }
  .stepCard {
    border-radius: var(--radius-lg, 0.5rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #CDDAEA;
    padding: calc(var(--spacing, 0.25rem) * 4);
  }
  .stepBadge {
    margin-bottom: calc(var(--spacing, 0.25rem) * 4);
    display: inline-block;
    border-radius: var(--radius-md, 0.375rem);
    background-color: var(--color-blue-700, #156AD1);
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
    padding-block: calc(var(--spacing, 0.25rem) * 1);
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
    color: var(--color-white, #fff);
  }
  .categoryBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing, 0.25rem) * 3);
    border-radius: var(--radius-lg, 0.5rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #B8DDFF;
    background-color: var(--color-white, #fff);
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 4);
    font-size: 15px;
    --tw-font-weight: var(--font-weight-medium, 500);
    font-weight: var(--font-weight-medium, 500);
    color: #536375;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50, #E4F1FB);
      }
    }
  }
  .scrollbar-thin::-webkit-scrollbar {
    height: 8px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .6);
    border-radius: 999px;
  }
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .7) transparent;
  }
  .articlesCard {
    border-radius: var(--radius-lg, 0.5rem);
    background-color: #FAFCFF;
    padding: calc(var(--spacing, 0.25rem) * 6);
  }
  .articlesCardHeader {
    display: flex;
    align-items: baseline;
    gap: calc(var(--spacing, 0.25rem) * 4);
    font-size: 15px;
    --tw-leading: 150%;
    line-height: 150%;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: #2D3743;
    color: #536375;
  }
  .articlesCardHr {
    margin-block: calc(var(--spacing, 0.25rem) * 4);
    border-color: #CDDAEA;
  }
  .articlesCardList {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .articlesCardLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing, 0.25rem) * 4);
    &:hover {
      @media (hover: hover) {
        opacity: 70%;
      }
    }
  }
  .articlesCardLinkText {
    display: flex;
    align-items: baseline;
    gap: calc(var(--spacing, 0.25rem) * 6);
    font-size: 13px;
    color: var(--color-blue-700, #156AD1);
  }
  .articlesCardLinkLabel {
    flex-shrink: 0;
    --tw-font-weight: var(--font-weight-medium, 500);
    font-weight: var(--font-weight-medium, 500);
  }
  .articlesCardLinkTitle {
    --tw-font-weight: var(--font-weight-medium, 500);
    font-weight: var(--font-weight-medium, 500);
  }
  .articlesCardArrow {
    height: calc(var(--spacing, 0.25rem) * 5);
    width: calc(var(--spacing, 0.25rem) * 5);
    flex-shrink: 0;
    color: var(--color-blue-700, #156AD1);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing, 0.25rem) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .articlesCardMoreWrap {
    margin-top: calc(var(--spacing, 0.25rem) * 8);
    display: flex;
    justify-content: center;
  }
  .articlesCardMore {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 3);
    font-size: 13px;
    color: #2D3743;
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700, #156AD1);
      }
    }
  }
  .articlesCardMoreArrow {
    height: calc(var(--spacing, 0.25rem) * 4);
    width: calc(var(--spacing, 0.25rem) * 8);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:hover {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing, 0.25rem) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .siteMapSection {
    padding-block: calc(var(--spacing, 0.25rem) * 10);
  }
  .siteMapTitle {
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    font-size: 28px;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: #536375;
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing, 0.25rem) * 10);
    }
    @media (width >= 48rem) {
      font-size: 34px;
    }
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing, 0.25rem) * 20);
    }
  }
  .siteMapOuter {
    margin-inline: calc(var(--spacing, 0.25rem) * 4);
    margin-top: calc(var(--spacing, 0.25rem) * 6);
    border-radius: var(--radius-2xl, 1rem);
    background-color: #FAFCFF;
    padding: calc(var(--spacing, 0.25rem) * 6);
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing, 0.25rem) * 10);
    }
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing, 0.25rem) * 20);
    }
  }
  .siteMapHead {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 4);
    border-radius: var(--radius-lg, 0.5rem);
    background-color: #EAF2FF;
    padding: calc(var(--spacing, 0.25rem) * 6);
  }
  .siteMapHeadIcon {
    flex-shrink: 0;
    color: var(--color-blue-700, #156AD1);
  }
  .siteMapHeadText {
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-blue-700, #156AD1);
  }
  .siteMapGrid {
    margin-top: calc(var(--spacing, 0.25rem) * 6);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing, 0.25rem) * 6);
  }
  .siteMapCard {
    border-radius: var(--radius-lg, 0.5rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #CDDAEA;
    background-color: #FAFCFF;
    padding-inline: calc(var(--spacing, 0.25rem) * 10);
    padding-block: calc(var(--spacing, 0.25rem) * 6);
  }
  .siteMapCard--full {
    width: 100%;
  }
  .siteMapCard--half {
    width: 100%;
    @media (width >= 48rem) {
      width: calc(50% - 24px);
    }
  }
  .siteMapCard--third {
    width: 100%;
    @media (width >= 48rem) {
      width: calc(50% - 24px);
    }
    @media (width >= 80rem) {
      width: calc((100% - 48px) / 3);
    }
  }
  .siteMapCard--thirdLast {
    width: 100%;
    @media (width >= 80rem) {
      width: calc((100% - 48px) / 3);
    }
  }
  .siteMapCardTitle {
    font-size: 15px;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: #2D3743;
  }
  .siteMapLinkCol {
    display: flex;
    flex-wrap: wrap;
    column-gap: calc(var(--spacing, 0.25rem) * 8);
    row-gap: calc(var(--spacing, 0.25rem) * 4);
    padding-top: calc(var(--spacing, 0.25rem) * 4);
  }
  .siteMapLink {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 3);
    --tw-font-weight: var(--font-weight-medium, 500);
    font-weight: var(--font-weight-medium, 500);
    color: #2D3743;
    &:hover {
      @media (hover: hover) {
        opacity: 70%;
      }
    }
  }
  .siteMapLinkText {
    font-size: 13px;
    white-space: nowrap;
  }
  .siteMapLinkTextWrap {
    font-size: 13px;
  }
  .siteMapArrow {
    width: calc(var(--spacing, 0.25rem) * 3);
    flex-shrink: 0;
    color: var(--color-blue-700, #156AD1);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing, 0.25rem) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .snsSection {
    border-radius: var(--radius-lg, 0.5rem);
    background-color: #FAFCFF;
    padding: calc(var(--spacing, 0.25rem) * 6);
  }
  .snsContainer {
    margin-inline: auto;
    max-width: var(--container-6xl, 72rem);
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing, 0.25rem) * 10);
    }
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing, 0.25rem) * 20);
    }
  }
  .snsPanel {
    border-radius: var(--radius-2xl, 1rem);
    background-color: #EAF2FF;
    padding: calc(var(--spacing, 0.25rem) * 6);
    @media (width >= 48rem) {
      padding: calc(var(--spacing, 0.25rem) * 8);
    }
  }
  .snsHeader {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 4);
    border-radius: var(--radius-lg, 0.5rem);
    background-color: #EAF2FF;
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 3);
  }
  .snsHeaderTitle {
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: #156AD1;
  }
  .snsGrid {
    margin-top: calc(var(--spacing, 0.25rem) * 4);
    display: grid;
    gap: calc(var(--spacing, 0.25rem) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .snsCard {
    border-radius: var(--radius-2xl, 1rem);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #CDDAEA;
    background-color: #FAFCFF;
    padding: calc(var(--spacing, 0.25rem) * 6);
  }
  .snsCardTop {
    display: flex;
    height: 100%;
    align-items: flex-start;
    gap: calc(var(--spacing, 0.25rem) * 4);
  }
  .snsAvatar {
    height: calc(var(--spacing, 0.25rem) * 20);
    width: calc(var(--spacing, 0.25rem) * 20);
    flex-shrink: 0;
    overflow: hidden;
  }
  .snsNameRow {
    display: flex;
    flex-direction: column;
  }
  .snsName {
    font-size: var(--text-xl, 1.25rem);
    line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: #7B8DA2;
  }
  .snsMeta {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
  }
  .snsHandle {
    font-size: 15px;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: #156AD1;
  }
  .snsDesc {
    margin-top: calc(var(--spacing, 0.25rem) * 1);
    font-size: 13px;
    --tw-leading: 150%;
    line-height: 150%;
    color: #536375;
  }
  .snsFollowBtn {
    margin-top: calc(var(--spacing, 0.25rem) * 4);
    display: flex;
    height: 44px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: #2D3743;
    font-size: 15px;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    --tw-tracking: var(--tracking-wide, 0.025em);
    letter-spacing: var(--tracking-wide, 0.025em);
    color: var(--color-white, #fff);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .snsFollowBtnOrange {
    margin-top: calc(var(--spacing, 0.25rem) * 4);
    display: flex;
    height: 44px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg, 0.5rem);
    background-image: linear-gradient(90deg,#F29344 0%,#E56800 100%);
    font-size: 15px;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    --tw-tracking: var(--tracking-wide, 0.025em);
    letter-spacing: var(--tracking-wide, 0.025em);
    color: var(--color-white, #fff);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .snsFollowBtnRed {
    margin-top: calc(var(--spacing, 0.25rem) * 4);
    display: flex;
    height: 44px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: #FF3D00;
    font-size: 15px;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    --tw-tracking: var(--tracking-wide, 0.025em);
    letter-spacing: var(--tracking-wide, 0.025em);
    color: var(--color-white, #fff);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .snsFollowBtnGreen {
    margin-top: calc(var(--spacing, 0.25rem) * 4);
    display: flex;
    height: 44px;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing, 0.25rem) * 2);
    border-radius: var(--radius-lg, 0.5rem);
    background-color: #00B900;
    font-size: 15px;
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    --tw-tracking: var(--tracking-wide, 0.025em);
    letter-spacing: var(--tracking-wide, 0.025em);
    color: var(--color-white, #fff);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .snsTitle {
    font-size: var(--text-2xl, 1.5rem);
    line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    color: #536375;
  }
}
@layer utilities {
  .shadowTeachers {
    box-shadow: 0 0 24px rgba(118, 131, 158, 0.20);
  }
}
@layer components {
  .msTcard {
    width: calc(1 / 3 * 100%);
    min-width: calc(var(--spacing, 0.25rem) * 60);
    border-radius: var(--radius-xl, 0.75rem);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
    --tw-duration: 500ms;
    transition-duration: 500ms;
    --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    @media (width >= 48rem) {
      width: calc(1 / 5 * 100%);
    }
    transition-property: transform, z-index, margin, opacity;
    transition-duration: 0.5s, 0.3s, 0.6s, 0.3s;
    transform-origin: center bottom;
  }
  .msTcardInner {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--color-white, #fff);
    transform-origin: center bottom;
    will-change: transform;
  }
  .msCardInner {
    transition: transform 650ms cubic-bezier(.22,1,.36,1);
    will-change: transform;
    transform-origin: center bottom;
  }
  .msTcover {
    height: calc(var(--spacing, 0.25rem) * 40);
    width: 100%;
    border-top-left-radius: var(--radius-xl, 0.75rem);
    border-top-right-radius: var(--radius-xl, 0.75rem);
    object-fit: cover;
  }
  .msTbody {
    padding: calc(var(--spacing, 0.25rem) * 4);
  }
  .msTtext {
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
    --tw-leading: var(--leading-relaxed, 1.625);
    line-height: var(--leading-relaxed, 1.625);
    color: var(--color-slate-700, oklch(37.2% 0.044 257.287));
  }
  .msTname, .msTdept {
    color: var(--color-slate-600, oklch(44.6% 0.043 257.281));
  }
  .msTdot {
    height: calc(var(--spacing, 0.25rem) * 2);
    width: calc(var(--spacing, 0.25rem) * 10);
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white, #fff) 40%, transparent);
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  }
  .msTdotActive {
    background-color: var(--color-white, #fff);
  }
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-border-style: solid;
      --tw-duration: initial;
      --tw-space-y-reverse: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-ease: initial;
    }
  }
}