@charset "UTF-8";
/*
  File Name   : top.css
  Description : Write top content styles
*/
/* TOP 共通パーツ
============================================================ */
@media print, screen and (min-width: 1025px) {
  .top {
    position: relative;
  }
  .top::before {
    content: "";
    position: absolute;
    display: block;
    width: 43.75%;
    height: min(48.75vw, 780px);
    top: 0;
    left: 0;
    background-color: var(--color_sub);
    -webkit-animation: keyTopBefore 0.8s 0.4s ease-in-out forwards;
            animation: keyTopBefore 0.8s 0.4s ease-in-out forwards;
    opacity: 0;
  }
  @-webkit-keyframes keyTopBefore {
    0% {
      opacity: 0;
      -webkit-transform: translate(-100%, 0);
              transform: translate(-100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
    }
  }
  @keyframes keyTopBefore {
    0% {
      opacity: 0;
      -webkit-transform: translate(-100%, 0);
              transform: translate(-100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
    }
  }
}
.top .top-txtScroll {
  display: block;
  white-space: nowrap;
}
.top .top-txtScroll > span {
  display: block;
  color: var(--color_main);
  font-family: var(--fontFamily_sub);
  font-size: max(102px, 5.3125vw);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 0em;
  text-indent: 0em;
  -webkit-animation: marquee 40s linear infinite forwards;
          animation: marquee 40s linear infinite forwards;
  will-change: transform;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top .top-txtScroll > span {
    font-size: 80px;
    -webkit-animation-duration: 31.36s;
            animation-duration: 31.36s;
  }
}
@media only screen and (max-width: 599px) {
  .top .top-txtScroll > span {
    font-size: 60px;
    -webkit-animation-duration: 23.52s;
            animation-duration: 23.52s;
    margin: -0.1em 0;
  }
}
.top .top-txtScroll > span:nth-child(2) {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-animation: marqueeReverse 54s linear infinite;
          animation: marqueeReverse 54s linear infinite;
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top .top-txtScroll > span:nth-child(2) {
    font-size: 80px;
    -webkit-animation-duration: 42.336s;
            animation-duration: 42.336s;
  }
}
@media only screen and (max-width: 599px) {
  .top .top-txtScroll > span:nth-child(2) {
    font-size: 60px;
    -webkit-animation-duration: 31.752s;
            animation-duration: 31.752s;
  }
}
@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes marqueeReverse {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes marqueeReverse {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.top .top-moreBtn {
  max-width: 300px;
}

/* KV
============================================================ */
.top-kv {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.top-kvInner {
  width: 100%;
  margin: 0 auto 0;
}
.top-kv .top-kv-slider {
  width: calc(100% - min(100px, 5.8vw));
  margin: 0 0 0 auto;
  background-color: #fff;
}
@media only screen and (max-width: 1024px) {
  .top-kv .top-kv-slider {
    width: 100%;
  }
}
.top-kv .top-kv-slider .top-kv-slider-wrapper .top-kv-slider-item .top-kv-slider-item-img {
  position: relative;
  display: block;
  width: 100%;
}
@media print, screen and (min-width: 1025px) {
  .top-kv .top-kv-slider .top-kv-slider-wrapper .top-kv-slider-item .top-kv-slider-item-img {
    height: auto;
    aspect-ratio: 1920/900;
    overflow: hidden;
  }
}
@media only screen and (max-width: 1024px) {
  .top-kv .top-kv-slider .top-kv-slider-wrapper .top-kv-slider-item .top-kv-slider-item-img {
    height: calc(100vh - var(--height-header_mbl) - 25px);
    height: calc(100dvh - var(--height-header_mbl) - 25px);
  }
}
.top-kv .top-kv-slider .top-kv-slider-wrapper .top-kv-slider-item .top-kv-slider-item-img > img {
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.top-kv .top-kv-slider-pagination {
  position: static;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin: 20px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-kv .top-kv-slider-pagination {
    margin-top: 15px;
  }
}
.top-kv .top-kv-slider-pagination .swiper-pagination-bullet {
  opacity: 1 !important;
  width: 60px;
  height: 5px;
  background-color: #BFBFBF;
  border-radius: 0;
  padding: 0;
  margin: 0;
  -webkit-transition: background-color 0.4s ease-in-out;
  transition: background-color 0.4s ease-in-out;
}
@media only screen and (max-width: 1024px) {
  .top-kv .top-kv-slider-pagination .swiper-pagination-bullet {
    width: 50px;
  }
}
.top-kv .top-kv-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color_main);
}

/* ABOUT US
============================================================ */
.top-aboutUs {
  padding: 143px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-aboutUs {
    padding: 111px 0 0;
  }
}
.top-aboutUs .top-aboutUs-contents {
  position: relative;
  padding: 120px var(--sidePadding_base);
}
@media only screen and (max-width: 1024px) {
  .top-aboutUs .top-aboutUs-contents {
    padding: 100px var(--sidePadding_base_mbl);
    margin: 7px 0 0;
  }
}
.top-aboutUs .top-aboutUs-contentsInner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 0;
  z-index: 1;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  padding: 50px var(--sidePadding_base) 44px;
  background-color: rgba(255, 255, 255, 0.85);
}
@media only screen and (max-width: 1024px) {
  .top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-main {
    padding: 56px var(--sidePadding_base_mbl) 45px;
  }
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-main .top-aboutUs-contents-main-emblem {
  width: 100%;
  max-width: 110px;
  margin: 0 auto 0;
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-main .top-aboutUs-contents-main-hl {
  margin: 5px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-main .top-aboutUs-contents-main-hl {
    margin-top: 20px;
  }
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-main .top-aboutUs-contents-main-description {
  width: 100%;
  max-width: 755px;
  font-size: 20px;
  line-height: 2em;
  letter-spacing: 0.09em;
  text-indent: 0.09em;
  text-align: center;
  margin: 33px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-main .top-aboutUs-contents-main-description {
    font-size: 18px;
    margin-top: 43px;
  }
}
@media only screen and (max-width: 599px) {
  .top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-main .top-aboutUs-contents-main-description {
    text-align: justify;
    text-indent: 0em;
  }
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-links .linkBtn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: 5.21em;
  color: #fff;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 0.06em;
  text-indent: 0em;
  text-align: center;
  text-decoration: none;
  background-color: var(--color_main);
  border-left: 1px solid #fff;
  padding: 1em;
}
@media only screen and (max-width: 1024px) {
  .top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-links .linkBtn {
    font-size: clamp(17px, 5.34vw, 20px);
    padding: 1.5em 0.5em;
    min-height: initial;
  }
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-links .linkBtn:first-child {
  border-left: none;
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-links .linkBtn::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border: 0.25em solid #fff;
  border-left-color: transparent;
  border-top-color: transparent;
  bottom: 0.5em;
  right: 0.5em;
  -webkit-transition: right 0.2s ease-in-out, bottom 0.2s ease-in-out;
  transition: right 0.2s ease-in-out, bottom 0.2s ease-in-out;
}
@media only screen and (max-width: 1024px) {
  .top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-links .linkBtn::after {
    border-width: 0.2em;
  }
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-links .linkBtn > span {
  display: block;
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-links .linkBtn:hover {
  opacity: 1 !important;
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-links .linkBtn:hover::after {
  bottom: 0.25em;
  right: 0.25em;
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-bgBlock {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 255, 0.2);
}
@media only screen and (max-width: 599px) {
  .top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-bgBlock {
    grid-template-columns: repeat(2, 1fr);
  }
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-bgBlock::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #AE9ED0;
  opacity: 0.4;
  pointer-events: none;
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-bgBlock .bgPict {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  z-index: -1;
}
.top-aboutUs .top-aboutUs-contents .top-aboutUs-contents-bgBlock .bgPict > img {
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}

/* SCHOOL INFORMATION
============================================================ */
.top-schoolInformation {
  padding: 167px 0 151px;
}
@media only screen and (max-width: 1024px) {
  .top-schoolInformation {
    padding: 113px 0 101px;
  }
}
.top-schoolInformation .top-schoolInformation-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  gap: 20px;
  margin: 52px 0 0;
}
.top-schoolInformation .top-schoolInformation-links .linkBanner {
  display: block;
  width: calc(50% - 10px);
  max-width: 590px;
  -webkit-box-shadow: 0px 3px 10px rgba(27, 11, 59, 0.3);
          box-shadow: 0px 3px 10px rgba(27, 11, 59, 0.3);
}
@media only screen and (max-width: 599px) {
  .top-schoolInformation .top-schoolInformation-links .linkBanner {
    width: 100%;
    max-width: 450px;
  }
}

/* SUPPORTER COMPANIES
============================================================ */
.top-supporterCompanies {
  position: relative;
  padding: 165px 0 131px;
  background-color: var(--color_main);
}
@media only screen and (max-width: 1024px) {
  .top-supporterCompanies {
    padding: 113px 0 98px;
  }
}
.top-supporterCompanies::before {
  content: "";
  position: absolute;
  display: block;
  width: 59.375%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #482688;
  -webkit-clip-path: polygon(41% 0%, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(41% 0%, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
}
@media only screen and (max-width: 1024px) {
  .top-supporterCompanies::before {
    width: 60%;
    -webkit-clip-path: polygon(65% 0%, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(65% 0%, 100% 0, 100% 100%, 0% 100%);
  }
}
.top-supporterCompaniesInner {
  position: relative;
  z-index: 1;
}
.top-supporterCompanies .top-supporterCompanies-list {
  margin: 70px auto 0;
}
@media only screen and (max-width: 1024px) {
  .top-supporterCompanies .top-supporterCompanies-list {
    margin-top: 61px;
  }
}
.top-supporterCompanies .top-supporterCompanies-list .linkBanner > img {
  border: none;
}
.top-supporterCompanies .top-supporterCompanies-seekingBnrs {
  display: grid;
  grid-template-columns: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 80px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-supporterCompanies .top-supporterCompanies-seekingBnrs {
    margin-top: 70px;
  }
}
.top-supporterCompanies .top-supporterCompanies-seekingBnrs > .seekingBnr {
  display: block;
}
.top-supporterCompanies .top-supporterCompanies-seekingBnrs > .seekingBnr > picture {
  display: block;
}
.top-supporterCompanies .top-supporterCompanies-linkBtn {
  margin: 71px auto 0;
}
@media only screen and (max-width: 1024px) {
  .top-supporterCompanies .top-supporterCompanies-linkBtn {
    margin-top: 51px;
  }
}

/* INSTAGRAM
============================================================ */
.top-instagram {
  padding: 171px 0 150px;
}
@media only screen and (max-width: 1024px) {
  .top-instagram {
    padding: 111px 0 102px;
  }
}
@media print, screen and (min-width: 1025px) {
  .top-instagram .top-instagram-hlWrap {
    position: relative;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 calc(262px + 50px) 45px;
    margin: 0 auto 0;
  }
}
@media print, screen and (min-width: 1025px) {
  .top-instagram .top-instagram-hlWrap .top-instagram-hl {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.top-instagram .top-instagram-hlWrap .top-instagram-hl-img {
  position: absolute;
  display: block;
  width: 262px;
  bottom: 0;
  left: 0;
}
@media only screen and (max-width: 1024px) {
  .top-instagram .top-instagram-snapwidget {
    margin: 37px 0 0;
  }
}
.top-instagram .top-instagram-snapwidgetInner {
  max-width: calc(1310px + (var(--sidePadding_base) * 2));
}
@media only screen and (max-width: 599px) {
  .top-instagram .top-instagram-snapwidgetInner {
    padding: 0 var(--sidePadding_base_mbl) 0;
  }
}
.top-instagram .top-instagram-moreBtnWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  margin: 40px auto 0;
}
@media only screen and (max-width: 1024px) {
  .top-instagram .top-instagram-moreBtnWrap {
    position: relative;
    padding: 0 0 0 45px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 38px auto 0;
  }
}
@media only screen and (max-width: 1024px) {
  .top-instagram .top-instagram-moreBtnWrap .top-instagram-moreBtn {
    width: 250px;
    padding-left: calc(2.5em - 22px);
    padding-right: calc(2.5em + 22px);
  }
}
@media only screen and (max-width: 1024px) {
  .top-instagram .top-instagram-moreBtnWrap .top-instagram-moreBtnDecore {
    position: absolute;
    display: block;
    width: 65px;
    bottom: 0;
    left: 0;
  }
}

/* NEWS
============================================================ */
.top-news {
  position: relative;
  padding: 120px 0 120px;
  background: url(../images/home/news_bg.jpg) no-repeat center/cover;
}
@media only screen and (max-width: 1024px) {
  .top-news {
    padding: 100px 0 100px;
  }
}
.top-news::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(111, 95, 142, 0.65);
}
.top-newsInner {
  position: relative;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 10px;
  padding: 92px var(--sidePadding_base) 80px;
  z-index: 1;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
@media only screen and (max-width: 1024px) {
  .top-newsInner {
    padding: 64px var(--sidePadding_base_mbl) 50px;
  }
}
@media only screen and (max-width: 1024px) {
  .top-news .top-news-hl .txtEn {
    font-size: 60px;
  }
}
.top-news .news-body {
  width: 100%;
  max-width: 930px;
  margin: 0 auto 0;
}
.top-news .top-news-catTab {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  margin: 50px 0 0;
}
@media only screen and (max-width: 599px) {
  .top-news .top-news-catTab {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1024px) {
  .top-news .top-news-catTab {
    gap: 5px;
  }
}
.top-news .top-news-catTab > li {
  display: block;
}
@media only screen and (max-width: 599px) {
  .top-news .top-news-catTab > li:first-child {
    grid-column: 1/-1;
  }
}
.top-news .top-news-catTab > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: 100%;
  color: var(--color_main);
  text-align: center;
  font-size: 16px;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--color_main);
  background-color: #fff;
  padding: 0.5em 0.5em;
  -webkit-transition: background-color 0.3s ease, color 0.2s ease;
  transition: background-color 0.3s ease, color 0.2s ease;
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top-news .top-news-catTab > li > a {
    font-size: clamp(14px, 2.2vw,16px);
    padding: 0.5em 0.25em;
  }
}
@media only screen and (max-width: 599px) {
  .top-news .top-news-catTab > li > a {
    font-size: clamp(12px, 4.267vw, 16px);
  }
}
.top-news .top-news-catTab > li > a.active {
  color: #fff;
  background-color: var(--color_main);
}
.top-news .top-news-catTab > li > a:hover {
  opacity: 1 !important;
}
@media print, screen and (min-width: 1025px) {
  .top-news .top-news-catTab > li > a:hover {
    color: #fff;
    background-color: var(--color_main);
  }
}
.top-news .top-news-list-wrap {
  margin: 15px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-news .top-news-list-wrap {
    margin-top: 20px;
  }
}
.top-news .top-news-list-wrap .com-news-list > ul {
  border: none;
  gap: 15px;
}
@media only screen and (max-width: 1024px) {
  .top-news .top-news-list-wrap .com-news-list > ul {
    gap: 10px;
  }
}
.top-news .top-news-list-wrap .com-news-list > ul > li {
  border: none;
  background-color: rgba(168, 125, 255, 0.05) !important;
}
.top-news .top-news-list-wrap .com-news-list > ul > li > a {
  background-color: #fff;
}
.top-news .top-news-moreBtn {
  margin: 50px auto 0;
}
@media only screen and (max-width: 1024px) {
  .top-news .top-news-moreBtn {
    margin-top: 46px;
  }
}

/* LINK BANNERS
============================================================ */
.top-linkBanners {
  padding: 150px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-linkBanners {
    padding: 100px 0 0;
  }
}
.top-linkBanners .top-linkBanners-bannersBlock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, min(calc((100% / 4) - (11px * 3 / 4)), 292px)));
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  gap: 11px;
  width: 100%;
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top-linkBanners .top-linkBanners-bannersBlock {
    grid-template-columns: repeat(3, 1fr);
    max-width: 880px;
    margin: 0 auto 0;
  }
}
@media only screen and (max-width: 599px) {
  .top-linkBanners .top-linkBanners-bannersBlock {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }
}
.top-linkBanners .top-linkBanners-bannersBlock .linkBanner {
  display: block;
  border: 2px solid var(--color_main);
}

/* CONTENTS FOOTER
============================================================ */
.top-contentsFooter {
  padding: 177px 0 0;
}
@media only screen and (max-width: 1024px) {
  .top-contentsFooter {
    padding: 125px 0 0;
  }
}
.top-contentsFooter .top-contentsFooter-picts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.top-contentsFooter .top-contentsFooter-picts::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--color_main);
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
}
.top-contentsFooter .top-contentsFooter-picts .pict {
  position: relative;
  display: block;
  width: 100%;
  height: 350px;
}
@media only screen and (max-width: 1024px) {
  .top-contentsFooter .top-contentsFooter-picts .pict {
    margin-top: 6px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
  .top-contentsFooter .top-contentsFooter-picts .pict {
    height: 200px;
  }
}
@media only screen and (max-width: 599px) {
  .top-contentsFooter .top-contentsFooter-picts .pict {
    height: 150px;
  }
}