@charset "utf-8";

.mv-area {
  padding: 0;
  margin-bottom: 67px;
}

.contents__box__topMv{
  width: 1688px;
  max-width: 100%;
}

.mv {
  width: 100%;
  position: relative;
}
  .mv__slider {
    width: 100%;
  }
    .mv__slide {
      width: 100%;
    }

  .mv__icon {
    width: 484px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    padding: 36px 20px 23px 52px;
    border-top-left-radius: 80px;
    z-index: 10;
  }

  .mv__thumbnails-wrapper {
    position: absolute;
    left: 3%;
    bottom: 3%;
    width: 40%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
  }
    .mv__thumbnails {
      flex: 1;
      min-width: 0;
    }
      .mv__thumbnails.mv__thumbnails--static {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .mv__thumbnails .slick-list {
        margin: 0 -4px;
      }
      .mv__thumbnails .slick-slide {
        margin: 0 4px;
      }
      .mv__thumbnails .slick-track {
        display: flex;
        align-items: center;
      }

    .mv__thumbnail {
      height: 60px;
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 8px;
      overflow: hidden;
      transition: border-color 0.3s ease, opacity 0.3s ease;
      opacity: 0.7;
      outline: none;
    }
      .mv__thumbnails--static .mv__thumbnail {
        flex: 1;
      }

      .mv__thumbnail:hover {
        opacity: 1;
      }
      .mv__thumbnail.slick-current {
        border-color: #1892D3;
        opacity: 1;
      }
      .mv__thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
      }

    .mv__control {
      width: 48px;
      height: 48px;
      background-color: rgba(255, 255, 255, 0.9);
      border: 2px solid #1892D3;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease;
    }
      .mv__control:hover {
        background-color: #1892D3;
      }
      .mv__control:hover .mv__control__icon {
        border-left-color: #FFFFFF;
      }
      .mv__control:hover .mv__control__icon--pause::before,
      .mv__control:hover .mv__control__icon--pause::after {
        background-color: #FFFFFF;
      }

      .mv__control__icon {
        display: block;
      }
        .mv__control__icon--play {
          width: 0;
          height: 0;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          border-left: 12px solid #1892D3;
          margin-left: 3px;
        }
        .mv__control__icon--pause {
          width: 16px;
          height: 16px;
          position: relative;
        }
          .mv__control__icon--pause::before,
          .mv__control__icon--pause::after {
            content: "";
            position: absolute;
            width: 4px;
            height: 16px;
            background-color: #1892D3;
          }
          .mv__control__icon--pause::before {
            left: 0;
          }
          .mv__control__icon--pause::after {
            right: 0;
          }

    .slick-slide img {
      border-radius: 20px;
    }

.top-nav {
  width: 92%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 25px;
}
  .top-nav__item {
    width: 23%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    position: relative;
    border: 1px solid #1892D3;
    border-radius: 8px;
    padding: 28px;
    text-decoration: none;
  }
    .top-nav__item::before {
      content: "";
      width: 6px;
      height: 6px;
      border-top: 2px solid #FFFFFF;
      border-right: 2px solid #FFFFFF;
      transform: rotate(45deg);
      position: absolute;
      bottom: 16px;
      right: 18px;
      z-index: 1;
    }
    .top-nav__item::after {
      content: "";
      width: 21px;
      height: 21px;
      color: #FFFFFF;
      background-color: #1892D3;
      position: absolute;
      bottom: 10px;
      right: 10px;
      border-radius: 11px;
    }

    .top-nav__item:hover {
      background: #E0F4FC;
      text-decoration: none;
    }
      .top-nav__item:hover::before {
        border-top: 2px solid #1892D3;
        border-right: 2px solid #1892D3;
      }
      .top-nav__item:hover::after {
        background-color: #FFFFFF;
      }

    .top-nav__item__img {
      width: 32%;
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
      .top-nav__item__img--02 {
        width: 65%;
      }
      .top-nav__item__img--03 {
        width: 50%;
      }
      .top-nav__item__img--04 {
        width: 50%;
      }

    .top-nav__item__text {
      width: 100%;
      display: flex;
      flex-flow: column;
      align-items: center;
      text-align: center;
    }
      .top-nav__item__text dt {
        width: 100%;
        margin-bottom: 5px;
        padding-bottom: 5px;
        font-size: 13px;
        color: #909090;
        border-bottom: 1px solid #707070;
      }

      .top-nav__item__text dd {
        width: 100%;
        font-size: 22px;
        font-weight: medium;
        color: #000;
      }

.top-contact {
  width: 92%;
  margin: 0 auto;
  padding: 54px 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 27px;
}
  .top-contact__column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 27px;
    width: 100%;
  }
    .top-contact__column .top-contact__box:first-child,
    .top-contact__column .top-contact__box:nth-child(2) {
      grid-column: 1;
    }
    .top-contact__column .top-contact__box:nth-child(3) {
      grid-column: 2;
      grid-row: 1 / 3;
    }

  .top-contact__box {
    width: 100%;
    padding: 15px 50px 25px 50px;
    display: flex;
    flex-flow: column;
    align-items: center;
    background: #FFFFFF;
    border-radius: 8px;
  }
    .top-contact__box__title {
      width: 100%;
      padding-bottom: 5px;
      margin-bottom: 15px;
      font-size: 26px;
      font-weight: medium;
      text-align: center;
      color: #0A4F98;
      border-bottom: 1px solid #1892D3;
    }

    .top-contact__box__text {
      width: 100%;
      text-align: center;
      font-size: 15px;
      margin-bottom: 12px;
    }
      .top-contact__box__text span {
        display: inline-block;
        background: #FDF9E2;
        padding: 4px 16px;
        border-radius: 4px;
        margin-right: 16px;
      }
      .top-contact__box__text strong {
        font-size: 24px;
        font-weight: bold;
      }
      .top-contact__box__text small {
        font-size: 14px;
        font-weight: normal;
      }

    .top-contact__box__dl {
      width: 100%;
      display: flex;
      text-align: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 3px;
    }
      .top-contact__box__dl dt {
        display: inline-block;
        background: #FDF9E2;
        padding: 4px 16px;
        border-radius: 4px;
        margin-right: 16px;
      }
      .top-contact__box__dl dd {
        font-size: 18px;
        font-weight: 600;
      }

    .top-contact__box__tel {
      display: flex;
      align-items: start;
      color: #0A4F98;
      font-size: 28px;
      font-weight: bold;
    }
      .top-contact__box__tel dt span {
        display: inline-block;
        color: #1A1F29;
        background: #FDF9E2;
        padding: 4px 16px;
        border-radius: 4px;
        margin-right: 16px;
        font-size: 16px;
      }

      .top-contact__box__tel dd {
        color: #FE4E47;
        font-size: 14px;
        font-weight: normal;
      }
        .top-contact__box__tel dd span {
          color: #0A4F98;
          font-size: 28px;
        }
    .top-contact__box__btn {
      margin-bottom: 15px;
    }

.top-title {
  font-size: 32px;
  font-weight: medium;
  color: #000000;
  margin-bottom: 20px;
}
  .top-title small {
    font-size: 16px;
    color: #909090;
    font-weight: normal;
    display: inline-block;
    margin-left: 20px;
  }

.top-course {
  width: 92%;
  margin: 0 auto;
  padding: 67px 0;
}
  .top-course__list {
    width: 100%;
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

    .top-course__list__item,
    .top-course__list__item:visited,
    .toptop-news__list__item__link,
    .top-news__list__item__link:visited{
      color: #1A1F29;
      text-decoration: none;
    }

    .top-course__list__item {
      width: 31%;
      padding: 20px 25px;
      border: 1px solid #B3E9FF;
      border-radius: 8px;
      display: flex;
      align-items: center;
      position: relative;
      gap: 25px;
      text-decoration: none;
      color: #1A1F29;
      font-size: 20px;
    }
      .top-course__list__item::before {
        content: "";
        width: 6px;
        height: 6px;
        border-top: 2px solid #FFFFFF;
        border-right: 2px solid #FFFFFF;
        transform: rotate(45deg);
        position: absolute;
        right: 28px;
        z-index: 1;
        translate: translateY(50%);
      }
      .top-course__list__item::after {
        content: "";
        width: 21px;
        height: 21px;
        color: #FFFFFF;
        background-color: #1892D3;
        position: absolute;
        right: 20px;
        border-radius: 11px;
        translate: translateY(50%);
      }


      .top-course__list__item:hover {
        text-decoration: none;
        color: #1A1F29;
        background: #E0F4FC;
        border: 1px solid #1892D3;
      }

      .top-course__list__item__link {
        display: flex;
        align-items: center;
        gap: 25px;
        text-decoration: none;
        color: #1A1F29;
      }
        .top-course__list__item__link:hover {
          display: flex;
          align-items: center;
          gap: 25px;
          text-decoration: none;
          color: #1A1F29;
        }

        .top-course__list__item__link__img {
          width: 44px;
        }

        .top-course__list__item__link__text {
          font-size: 20px;
          font-weight: medium;
        }

.top-news {
}
  .top-news__list {
    display: flex;
    flex-flow: column;
    gap: 5px;
    margin-top: 28px;
  }
    .top-news__list__item__link {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #000000;
      gap: 10px;
      background: #FFFFFF;
      border-radius: 8px;
      padding: 20px 17px;
      position: relative;
    }
      .top-news__list__item__link::after {
        content: "";
        width: 6px;
        height: 6px;
        border-top: 2px solid #F76C4F;
        border-right: 2px solid #F76C4F;
        transform: rotate(45deg);
        position: absolute;
        right: 30px;
        z-index: 1;
      }

      .top-news__list__item__link:hover {
        text-decoration: none;
      }

      .top-news__list__item__link__category {
        font-size: 13px;
        text-align: center;
        background: #FFCCC1;
        border-radius: 4px;
        padding: 5px 0;
        width: 120px;
        margin-right: 10px;
      }

.top-contents_bnr {
  width: 92%;
  margin: 0 auto;
}
* + .top-contents_bnr {
  margin-top: 30px;
}
  .top-contents_bnr--pc {
    width: 100%;
    display: block;
  }

/*.top-depota {
  width: 92%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}
  .top-depota--pc {
    width: 100%;
    display: block;
  }*/

.top-recruit {
  width: 92%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
  .top-recruit__img {
    width: 61%;
  }

  .top-recruit__info {
    width: 35%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 10px;
  }
    .top-recruit__info__title {
      font-size: 32px;
      font-weight: medium;
      color: #000000;
    }
      .top-recruit__info__title span {
        font-size: 16px;
        color: #909090;
        margin-left: 20px;
      }

      .top-recruit__info__text--blue {
        color: #1892D3;
      }

.top-banner {
  width: 92%;
  margin: 0 auto;
  padding: 60px 0;
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}
  .top-banner__link {
    width: 23%;
  }


/* tablet & mobile */
@media screen and (max-width: 1279px) {
  .top-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
    .top-title small {
      font-size: 14px;
      margin-left: 15px;
    }

  .slick-list,
  .slick-track {
    height: 100%;
  }

  .mv-area {
    padding: 0;
    margin-bottom: 30px;
  }

  .mv {
    width: 100%;
    min-height: inherit;
    height: auto;
    position: relative;
    margin-top: -50px;
  }
  .pickup_topics + .mv-area .mv{
    margin-top: 0;
  }
    .mv__slider {
      width: 100%;
      padding: 0 5%;
      /* height: 75vh !important; */
      height: auto !important;
    }
      .mv__slide {
        height: 100% !important;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }
        .mv__slide picture {
          width: 100% !important;
          max-width: 100% !important;
          height: auto !important;
          border-bottom-left-radius: 20px;
        }
        .mv__slide img {
          width: 100% !important;
          max-width: 100% !important;
          height: auto !important;
          border-bottom-left-radius: 20px;
        }

    .mv__image {
      width: 100%;
      height: 495px;
    }
      .mv__image img {
        width: auto !important;
        max-width: auto !important;
        height: 100% !important;
        object-fit: cover;
        border-bottom-left-radius: 40px;
      }

    .mv__icon {
      width: 85%;
      position: relative;
      margin: -45px 0 0 auto;
      padding: 20px 5% 20px 10%;
      border-top-left-radius: 50px;
    }

    .mv__thumbnails-wrapper {
      position: static;
      width: 100%;
      padding: 0 5%;
      margin: 15px 0 0 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }
      .mv__thumbnails {
        flex: 1;
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .mv__thumbnail {
        flex: 1;
        height: 66px;
      }
      .mv__control {
        width: 44px;
        height: 44px;
      }

  .slick-initialized .slick-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
  }

  .top-nav {
    width: 90%;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px 0;
  }
    .top-nav__item {
      width: 48%;
      padding: 20px 15px 30px 15px;
      justify-content: end;
      gap: 5px;
    }
      .top-nav__item__img {
        width: 60%;
        min-height: 50px;
      }
        .top-nav__item__img--sp-mrg {
          width: 90%;
          margin-left: 5px;
          margin-bottom: 10px;
        }

      .top-nav__item__text dd {
        width: 100%;
        font-size: 16px;
        font-weight: medium;
        color: #000;
      }

  .top-contact {
    padding: 54px 0 0 0;
  }
    .top-contact__column {
      width: 100%;
      display: flex;
      flex-flow: column;
    }
      .top-contact__box {
        width: 100%;
        padding: 15px 20px;
      }
        .top-contact__box--sp {
          padding-bottom: 20px;
        }
        .top-contact__box__title {
          padding-bottom: 5px;
          font-size: 18px;
        }
          .top-contact__box__text {
          }
          .top-contact__box__text--sp {
            text-align: left;
          }
            .top-contact__box__text strong {
              font-size: 20px;
            }

        .top-contact__box__dl {
          align-items: baseline;
          margin-bottom: 10px;
        }
          .top-contact__box__dl dt {
            width: 29%;
            font-size: 14px;
            border-radius: 4px;
            margin-right: 13px;
          }
          .top-contact__box__dl dd {
            width: 70%;
            font-size: 14px;
            border-radius: 4px;
            margin-right: 13px;
            text-align: left;
          }
          .top-contact__box__dl strong {
            font-size: 24px;
            font-weight: bold;
          }
          .top-contact__box__dl small {
            font-size: 14px;
            font-weight: normal;
          }

      .top-contact__box__tel {
        flex-flow: column;
        align-items: center;
      }
        .top-contact__box__tel dd {
          text-align: center;
        }
          .top-contact__box__tel dd a {
            color: #0A4F98;
            font-size: 28px;
            text-decoration: none;
          }

  .top-course {
    width: 90%;
    margin: 0 auto;
    padding: 45px 0;
  }
    .top-course__list {
      width: 100%;
      gap: 15px;
      flex-flow: column;
    }
      .top-course__list__item {
        width: 100%;
      }

  .top-news {
  }
    .top-news__list {
      gap: 10px;
      margin-top: 0;
      margin-bottom: 20px;
    }
      .top-news__list__item__link {
        flex-wrap: wrap;
        gap: 10px;
        padding: 15px;
      }
        .top-news__list__item__link::after {
          display: none;
        }
        .top-news__list__item__link__category {
        }
        .top-news__list__item__link__text {
          width: 100%;
        }

  .top-recruit {
    width: 90%;
    display: flex;
    flex-flow: column;
    gap: 20px;
  }
    .top-recruit__img {
      width: 100%;
    }

    .top-recruit__info {
      width: 100%;
    }
      .top-recruit__info__title {
        font-size: 24px;
      }
        .top-recruit__info__title span {
          font-size: 14px;
          margin-left: 15px;
        }

  .top-banner {
    width: 90%;
    padding: 0;
    gap: 20px;
    flex-flow: column;
  }
    .top-banner__link {
      width: 100%;
    }
}

/*---------------------------------------------------------------------
  pickup_topics
---------------------------------------------------------------------*/
.pickup_topics {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 20px;
  border: 1px solid #E60011;
  border-radius: 6px;
}
.pickup_topics .ttl {
  background: #E60011;
  font-size: 1.8rem;
  font-weight: normal;
  padding: 10px;
  position: relative;
  border-radius: 6px 6px 0 0;
  color: #fff;
}
.pickup_topics .list {
  padding: 10px;
  border-radius: 0 0 6px 6px;
}

.pickup_topics .list li{
  padding: 7px 0;
}
.pickup_topics .list li + li {
  border-top: 1px dashed #BFBFBF;
}
.pickup_topics .list a {
  display: block;
  color: #000;
  position: relative;
  padding-left: 20px;
  text-decoration: none;
}
.pickup_topics .list a::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    border: 4px solid transparent;
    border-left: 7px solid #E60011;
}

.pickup_topics .list .date{
  margin-right: 15px;
  color: #707070;
}

.pickup_topics .list .title{
  text-decoration: underline;
}

/* pc */
@media print, screen and (min-width: 1280px) {
  .pickup_topics {
    display: table;
  }
  .pickup_topics .ttl {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    border-radius: 6px 0 0 6px;
    text-align: center;
    padding: 15px 20px;
    border-bottom: none;
  }
  .pickup_topics .list {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
  }

  .pickup_topics .list .date{
    margin-right: 20px;
  }

  .pickup_topics .list .title{
  }
}