@charset "UTF-8";
body:before {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: rgba(17, 44, 70, 0.8); }

.hide {
  display: none !important; }

.remove:before {
  content: none;
  transition: all .5s ease-in-out; }

.pop-up {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  overflow: auto;
  max-width: 1088px;
  max-height: 885px;
  width: calc(100% - 2rem);
  height: calc( 100% - 4rem);
  padding-bottom: 2rem;
  border-radius: 10px;
  background-color: #001F2F;
  color: white;
  box-shadow: 0 6px 12px #0D2945; }
  .pop-up * {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none; }
  .pop-up p {
    max-width: 650px;
    line-height: 1.6;
    margin-bottom: 0.666rem;
    padding: 0 1rem; }
  .pop-up a {
    margin-top: 32px; }
  .pop-up.js-opacity-block {
    display: none; }
    .pop-up.js-opacity-block.show {
      display: block; }
  .pop-up ::-webkit-scrollbar {
    display: none; }
  .pop-up__wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden; }
  .pop-up__banner {
    background-color: #176EA8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-height: 100px; }
    .pop-up__banner-img {
      width: 65px;
      height: 60px;
      padding: 0.666rem 1.066rem 0.6rem 1.2rem;
      background-color: #176EA8; }
    .pop-up__banner .pop-up__title {
      flex-basis: 100%;
      width: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
      color: white;
      font-size: 24px;
      font-weight: 700;
      margin-top: 0;
      margin-bottom: 0; }
    .pop-up__banner .close {
      background-color: #176EA8;
      border: none;
      margin-right: 1.2rem; }
      .pop-up__banner .close .icon-close {
        width: 1.2rem;
        height: 1.2rem;
        padding: .466rem;
        stroke: white;
        fill: white;
        background-color: #176EA8; }
        .pop-up__banner .close .icon-close:hover {
          cursor: pointer; }
  .pop-up__jpo {
    background-color: #001F2F;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem; }
    .pop-up__jpo .jpo__btn-group {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2.133rem;
      flex-direction: column;
      padding-bottom: 2rem; }
    .pop-up__jpo .jpo__banner {
      display: flex;
      justify-content: center;
      background-color: #FCBD31;
      margin: 0 1rem; }
      .pop-up__jpo .jpo__banner .jpo-banner__img {
        width: 100%;
        height: 36.1581920904%;
        max-width: 597px;
        max-height: 320px; }
  .pop-up__school-life {
    background-color: #001F2F;
    max-width: 1088px;
    width: 79.7653958944%;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 0px;
    overflow-y: scroll; }
    .pop-up__school-life p {
      padding: inherit; }
    .pop-up__school-life .sl__list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
      height: 77.4509803922%;
      max-height: 760px; }
    .pop-up__school-life .sl__el {
      display: block;
      width: 100%;
      height: 100%;
      max-height: 275px;
      margin-bottom: 3.334rem;
      position: relative; }
      .pop-up__school-life .sl__el.--prio {
        order: -1;
        flex-basis: auto; }
      .pop-up__school-life .sl__el .img-container {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F6B334;
        width: 100%;
        height: 100%;
        position: absolute;
        top: calc(1rem + 1.333rem);
        left: 0;
        z-index: 70;
        cursor: pointer; }
        .pop-up__school-life .sl__el .img-container.--orange {
          background-color: #E96821; }
        .pop-up__school-life .sl__el .img-container.--orange-light {
          background-color: #EB8B2D; }
        .pop-up__school-life .sl__el .img-container.--blue {
          background-color: #1B88B4; }
      .pop-up__school-life .sl__el .img-mini {
        height: 17.333rem;
        width: 17.333rem;
        max-width: 172px;
        max-height: 172px; }
      .pop-up__school-life .sl__el iframe {
        width: inherit;
        height: 100%;
        border: 0;
        max-height: 275px;
        position: absolute;
        top: calc(1rem + 1.333rem);
        left: 0;
        z-index: 65; }
      .pop-up__school-life .sl__el:last-child {
        padding-bottom: 30px; }
    .pop-up__school-life .pop-up__title {
      padding: 0;
      margin-top: 0;
      margin-bottom: 1rem; }
  .pop-up__btn {
    padding-top: 1.066rem;
    padding-bottom: 1.066rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    background-color: #E6501D;
    border: inherit;
    border-radius: .666rem;
    color: white;
    font-size: 15px;
    line-height: 1;
    cursor: pointer; }
    .pop-up__btn:hover {
      color: rgba(255, 255, 255, 0.9);
      background-color: #bb3f15; }
  .pop-up__link {
    color: #E6501D;
    border-bottom: 2px solid #E6501D;
    font-weight: 700; }
    .pop-up__link:hover {
      color: #bb3f15;
      border-bottom: 2px solid #bb3f15; }
    .pop-up__link.--solo {
      display: inline-block;
      margin-bottom: .666rem;
      margin-left: 1rem;
      color: #E6501D;
      border-bottom: 2px solid #E6501D !important;
      text-transform: uppercase; }
      .pop-up__link.--solo:hover {
        color: #bb3f15;
        border-bottom: 2px solid #bb3f15 !important; }
    .pop-up__link.close {
      color: rgba(255, 255, 255, 0.5);
      margin-top: 3.1638418079%;
      border: inherit;
      font-weight: inherit; }
      .pop-up__link.close:hover {
        color: rgba(255, 255, 255, 0.2); }
  .pop-up__list {
    margin-bottom: .666rem; }
    .pop-up__list .pop-up__el {
      padding-left: 1rem;
      margin-bottom: .666rem; }
      .pop-up__list .pop-up__el::before {
        content: '✓';
        padding-right: 1rem; }
  .pop-up__title {
    color: white;
    line-height: 1;
    font-weight: 700;
    font-size: 2rem;
    margin-top: 1.333rem;
    margin-bottom: .666rem;
    padding: 0 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem; }
    .pop-up__title.--sub {
      display: block;
      line-height: 1.4;
      margin-bottom: 2rem;
      font-weight: 500;
      font-size: 1.2rem; }
    .pop-up__title.--sl {
      font-size: 1.333rem;
      margin-bottom: 1rem; }

@media (min-width: 576px) {
  .pop-up__banner .pop-up__title {
    padding-left: 30px;
    padding-right: 0; } }

@media (min-width: 768px) {
  .pop-up__title {
    padding-left: 0;
    padding-right: 0; }
  .pop-up__banner {
    max-height: 80px; }
  .pop-up__link.--solo {
    margin-left: 0; }
  .pop-up__jpo {
    max-width: 828px;
    width: 60.7038123167%; }
    .pop-up__jpo .jpo__banner {
      margin: 0; }
  .pop-up p {
    padding: inherit; }
  .pop-up a {
    margin-top: 0px; } }

@media (min-width: 992px) {
  .pop-up__school-life .sl__el {
    flex-basis: 48.9043824701%; } }

@media (min-width: 1400px) {
  .pop-up {
    width: 71.04167%; }
  .pop-up__school-life {
    max-width: 1238px; }
    .pop-up__school-life .sl__el {
      flex-basis: 48.9043824701%; } }

.pop-up {
  transition-delay: .1s; }
  .pop-up__btn {
    transition: all .5s ease; }
  .pop-up__school-life {
    transition-delay: .234s;
    transition: all .678s ease-in-out; }
    .pop-up__school-life.js-opacity-block {
      transform: scale(0.5); }
    .pop-up__school-life.js-opacity-block.show {
      transform: scale(1); }
  .pop-up__link.close {
    transition: all .5s ease; }
  .pop-up.js-opacity-block, .pop-up .js-opacity-block {
    transition: all 0.5s ease-in-out;
    z-index: -1;
    opacity: 0; }
    .pop-up.js-opacity-block.--reduce, .pop-up .js-opacity-block.--reduce {
      height: 0;
      margin-top: 0;
      padding-bottom: 0;
      padding-top: 0; }
    .pop-up.js-opacity-block.show, .pop-up .js-opacity-block.show {
      z-index: 100;
      opacity: 1; }
  .pop-up .sl__el iframe {
    transition: all .5s ease;
    transform: scale(0.85); }
    .pop-up .sl__el iframe.--appear {
      transform: scale(1); }
  .pop-up .img-container .img-mini {
    transition: all .5s ease; }
  .pop-up .img-container:hover .img-mini {
    transform: scale(1.15); }