@charset "UTF-8";
/* 投稿数制限
---------------------------------------------------------- */
.news__list .post:nth-child(n+6),
.school__list .post:nth-child(n+6),
.topics__list .post-card:nth-child(n+6) {
  display: none;
}
@media screen and (min-width: 768px) {
  .news__list .post:nth-child(n+6),
  .school__list .post:nth-child(n+6),
  .topics__list .post-card:nth-child(n+6) {
    display: block;
  }
}

/* ページ全体
---------------------------------------------------------- */
.home {
  position: relative;
}
.home::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 4%;
  height: 100%;
  background-color: #3D569D;
  z-index: -1;
}
@media screen and (min-width: 400px) {
  .home::before {
    width: 4.7619047619%;
  }
}
@media screen and (min-width: 768px) {
  .home::before {
    width: 7.6041666667%;
  }
}

.cta-area {
  margin-top: clamp(3.125rem, 1.7857142857rem + 6.6964285714vw, 5rem);
}
.cta-area .home-aside {
  max-width: 26.25rem;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .cta-area .home-aside {
    display: none;
  }
}
.cta-area .cta {
  padding-top: clamp(2.1875rem, 0.1785714286rem + 10.0446428571vw, 5rem);
}
.cta-area .cta__menus {
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .cta-area .cta__menus {
    flex-direction: row;
  }
}
.cta-area .cta__menu {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .cta-area .cta__menu {
    width: 50%;
  }
}

/* 左右の余白
---------------------------------------------------------- */
.news,
.topics,
.school,
.cta-area {
  padding-inline: 4%;
}
@media screen and (min-width: 400px) {
  .news,
  .topics,
  .school,
  .cta-area {
    padding-inline: 5.9523809524%;
  }
}
@media screen and (min-width: 768px) {
  .news,
  .topics,
  .school,
  .cta-area {
    padding-inline: 7.9852579853%;
  }
}

.topics,
.links {
  padding-inline: 0;
}
@media screen and (min-width: 400px) {
  .topics,
  .links {
    padding-inline: 5.9523809524%;
  }
}
@media screen and (min-width: 768px) {
  .topics,
  .links {
    padding-inline: 7.9852579853%;
  }
}

/* FV
---------------------------------------------------------- */
.fv {
  position: relative;
  width: 100%;
  background-image: url("/media/images/home/fv-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
@supports (background-image: url("image.webp")) {
  .fv {
    background-image: url("/media/images/home/fv-bg.webp");
  }
}
.fv::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
}
.fv .splide {
  position: relative;
  width: 100%;
  height: 100%;
}
.fv .splide__slide {
  position: relative;
}
.fv .splide__track {
  height: 100%;
}

.fv__inner {
  width: 100%;
  height: 100%;
  padding-block: 1.875rem;
}
@media screen and (min-width: 400px) {
  .fv__inner {
    padding-block: 2.5rem;
  }
}
@media screen and (min-width: 992px) {
  .fv__inner {
    padding-block: 3.125rem;
  }
}
@media screen and (min-width: 1200px), print {
  .fv__inner {
    padding-block: 3.625rem;
  }
}

.fv__slide_image img {
  width: 100%;
  aspect-ratio: 891/509;
  object-fit: contain;
  background-color: #c5d4d8;
}

.fv__slide_body {
  padding: clamp(0.9375rem, 0.7142857143rem + 1.1160714286vw, 1.25rem) clamp(0.9375rem, 0.7142857143rem + 1.1160714286vw, 1.25rem) 2.1875rem;
  background-color: #FFFFFF;
}
@media screen and (min-width: 768px) {
  .fv__slide_body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: clamp(1.25rem, 0.8702531646rem + 0.7911392405vw, 1.5625rem) clamp(1.875rem, 1.1155063291rem + 1.582278481vw, 2.5rem);
    background-color: transparent;
  }
}

.fv__slide_categories {
  display: flex;
  gap: 0.3125rem;
}

.fv__slide_title {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
  font-weight: 700;
  line-height: 1.5384615385;
  letter-spacing: 0.05em;
  margin-top: clamp(0.3125rem, 0.25rem + 0.3125vw, 0.625rem);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .fv__slide_title {
    color: #FFFFFF;
    text-shadow: 1px 1px 2px rgba(1, 1, 58, 0.8), -1px 1px 2px rgba(1, 1, 58, 0.8), 1px -1px 2px rgba(1, 1, 58, 0.8), -1px -1px 2px rgba(1, 1, 58, 0.8);
  }
}

.splide__pagination {
  bottom: 0.625rem !important;
}
@media screen and (min-width: 768px) {
  .splide__pagination {
    bottom: -1.5625rem !important;
  }
}
@media screen and (min-width: 992px) {
  .splide__pagination {
    bottom: -1.875rem !important;
  }
}
@media screen and (min-width: 1200px), print {
  .splide__pagination {
    bottom: -2.1875rem !important;
  }
}
.splide__pagination .splide__pagination__page {
  width: clamp(1.875rem, 1.45rem + 2.125vw, 4rem);
  height: 0.1875rem;
  background-color: #B7B5B5;
  opacity: 1;
  transform: scale(1) !important;
  border-radius: 0 !important;
  margin: 0 5px !important;
}
.splide__pagination .splide__pagination__page.is-active {
  background: #3D569D;
  transform: scale(1) !important;
}

/* お知らせ
---------------------------------------------------------- */
.news {
  position: relative;
  display: grid;
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 5rem) clamp(4.375rem, 3.75rem + 3.125vw, 7.5rem);
}
@media screen and (min-width: 768px) {
  .news {
    gap: 5.5282555283%;
    grid-template-columns: 1fr clamp(12.5rem, 0.6518987342rem + 24.6835443038vw, 22.25rem);
  }
}
.news .home-aside {
  display: none;
}
@media screen and (min-width: 768px) {
  .news .home-aside {
    display: block;
  }
}

.news__list {
  margin-top: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
  border-top: 1px solid #707070;
}
@media screen and (min-width: 768px) {
  .news__list .post__date {
    font-size: clamp(0.875rem, 0.7231012658rem + 0.3164556962vw, 1rem);
  }
}
@media screen and (min-width: 768px) {
  .news__list .post__title {
    font-size: clamp(1.125rem, 0.6693037975rem + 0.9493670886vw, 1.5rem);
  }
}
@media screen and (min-width: 768px) {
  .news__list .post__text {
    font-size: clamp(0.875rem, 0.5712025316rem + 0.6329113924vw, 1.125rem);
  }
}

.news__button {
  width: 16.25rem;
  margin: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem) auto 0;
}
@media screen and (min-width: 768px) {
  .news__button {
    width: clamp(12.5rem, 8.7025316456rem + 7.9113924051vw, 15.625rem);
    margin-right: 0;
  }
}
@media screen and (min-width: 768px) {
  .news__button .button {
    font-size: clamp(1rem, 0.6962025316rem + 0.6329113924vw, 1.25rem);
  }
}

/* 活動トピック
---------------------------------------------------------- */
.topics {
  position: relative;
  width: 100%;
  height: 100%;
  padding-block: clamp(4.375rem, 3.75rem + 3.125vw, 7.5rem);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: clamp(5rem, 4rem + 5vw, 10rem) 0 0 0;
  overflow: hidden;
}
.topics.lazyloaded {
  background-image: url("/media/images/home/topics-bg.png");
}
.topics.lazyloaded::after {
  background-image: url("/media/images/home/topics-bg_shippo.png");
}
@supports (background-image: url("image.webp")) {
  .topics.lazyloaded {
    background-image: url("/media/images/home/topics-bg.webp");
  }
  .topics.lazyloaded::after {
    background-image: url("/media/images/home/topics-bg_shippo.webp");
  }
}
.topics::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}
.topics::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 35.2380952381%;
  height: 100%;
  background-repeat: repeat-y;
  background-size: 100%;
}
@media screen and (min-width: 768px) {
  .topics::after {
    width: 14.5833333333%;
  }
}
.topics .title {
  text-align: center;
}

.topics__sakura {
  position: absolute;
  top: -0.3125rem;
  left: -0.3125rem;
  width: 33.3333333333%;
}
@media screen and (min-width: 400px) {
  .topics__sakura {
    top: -0.9375rem;
    left: -0.9375rem;
  }
}
@media screen and (min-width: 768px) {
  .topics__sakura {
    top: -1.5625rem;
    left: -1.5625rem;
    width: 27.0833333333%;
  }
}
@media screen and (min-width: 992px) {
  .topics__sakura {
    top: -2.8125rem;
    left: -2.8125rem;
  }
}

.topics__inner {
  position: relative;
  z-index: 1;
}

.topics__list {
  display: grid;
  gap: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
  max-width: 820px;
  margin: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem) auto 0;
}
@media screen and (min-width: 1200px), print {
  .topics__list {
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
}
.topics__list .post-card__link {
  height: 100%;
}
.topics__list .post-card__tagblock {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}
.topics__list .post-card__tagchip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}
.topics__list .post-card__categories {
  flex-wrap: wrap;
}

.topics__button {
  width: 16.25rem;
  margin: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem) auto 0;
}
@media screen and (min-width: 768px) {
  .topics__button {
    width: 16.875rem;
  }
}

/* 学校news
---------------------------------------------------------- */
.school {
  padding-top: clamp(4.375rem, 3.75rem + 3.125vw, 7.5rem);
}

.school__list {
  margin-top: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
}

.school__button {
  width: 16.25rem;
  margin: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem) auto 0;
}
@media screen and (min-width: 768px) {
  .school__button {
    width: 15.625rem;
    margin-right: 0;
  }
}

/* リンク集
---------------------------------------------------------- */
.links {
  padding-block: clamp(3.125rem, 2.75rem + 1.875vw, 5rem) clamp(3.75rem, 3.25rem + 2.5vw, 6.25rem);
  background-color: #3D569D;
}

.links__head {
  color: #FFFFFF;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .links__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.links__head_button {
  display: none;
  width: 15.3125rem;
}
@media screen and (min-width: 768px) {
  .links__head_button {
    display: block;
  }
}

.links__list {
  display: grid;
  gap: clamp(0.625rem, 0.375rem + 1.25vw, 1.875rem);
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
}
@media screen and (min-width: 576px) {
  .links__list {
    grid-template-columns: repeat(auto-fill, minmax(13.125rem, 1fr));
  }
}

.links__button {
  margin-top: clamp(1.25rem, 0.46875rem + 3.90625vw, 1.875rem);
}
@media screen and (min-width: 768px) {
  .links__button {
    display: none;
  }
}
.links__button .button {
  width: clamp(13.75rem, 10.625rem + 15.625vw, 16.25rem);
  margin-inline: auto;
}/*# sourceMappingURL=style-home.css.map */