@charset "UTF-8";

/* -------------------- components -------------------- */

/* ---------- title ---------- */
.ho-renew__title {
  display: flex;
  gap: 0 .8rem;
  font-size: 2.4rem;
  font-weight: bold;
  color: #000A6E;
  letter-spacing: 4%;
}

.ho-renew__title::before {
  display: block;
  width: .8rem;
  content: "";
  background: #FF0000;
}

.ho-renew__sub-title {
  position: relative;
  padding-bottom: 1.2rem;
  margin-bottom: 1.6rem;
  font-size: 1.8rem;
  font-weight: bold;
  color: #000A6E;
  letter-spacing: 4%;
}

.ho-renew__sub-title::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: .4rem;
  content: "";
  background: #E0E1ED;
}

.ho-renew__sub-title::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.4rem;
  height: .4rem;
  content: "";
  background: #000A6E;
}

/* ---------- button ---------- */
.ho-renew__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 150%;
  color: #fff;
  letter-spacing: 4%;
  background: #000A6E;
  border-radius: .4rem;
  transition: opacity .4s ease;
}

@media (hover: hover) {
  .ho-renew__button:hover {
    opacity: .6;
  }
}

.ho-renew__button[target="_blank"] span {
  display: flex;
  gap: 0 .8rem;
}

.ho-renew__button[target="_blank"] span::after {
  display: block;
  width: 1.6rem;
  aspect-ratio: 1 / 1;
  content: "";
  background-color: #fff;
  mask-image: url("../../images/common/icon-blank.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* ---------- contents ---------- */
.ho-renew__section {
  display: flex;
  flex-direction: column;
  gap: 2.4rem 0;
}

.ho-renew__section-contents {
  padding: 1.6rem;
  margin-right: 1.6rem;
  margin-left: 1.6rem;
  background: #fff;
}

@media screen and (width >= 768px), print {
  .ho-renew__section-contents {
    padding: 3.2rem 4rem;
    margin-right: 0;
    margin-left: 0;
  }
}

.ho-renew__text {
  font-size: 1.4rem;
  line-height: 150%;
  color: #000537;
  letter-spacing: 4%;
}

/* ---------- activities ---------- */
.ho-renew__activities-contents {
  margin-right: 1.6rem;
  margin-left: 1.6rem;
}

@media screen and (width >= 768px), print {
  .ho-renew__activities-contents {
    margin-right: 0;
    margin-left: 0;
  }
}

.ho-renew__activities {
  display: flex;
  flex-direction: column;
  gap: 1.6rem 0;
}

.ho-renew__activities-list {
  position: relative;
}

.ho-renew__activities-list_wrap {
  position: relative;
  padding-right: 1.6rem;
  padding-left: 1.6rem;
  margin-top: 1.6rem;
}

@media screen and (width >= 768px), print {
  .ho-renew__activities-list_wrap {
    padding-right: calc((100% - 1088px) / 2);
    padding-left: calc((100% - 1088px) / 2);
  }
}

.ho-renew__activities-list_nav {
  display: flex;
  margin-right: 1.6rem;
  margin-left: 1.6rem;
  overflow: hidden;
  border-radius: .4rem .4rem 0 0;
}

@media screen and (width >= 768px), print {
  .ho-renew__activities-list_nav {
    margin-right: 0;
    margin-left: 0;
  }
}

.ho-renew__activities-list_nav li {
  flex: 1;
}

.ho-renew__activities-list_nav button {
  position: relative;
  height: 4.8rem;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 150%;
  color: #000A6E;
  text-align: center;
  background: #fff;
  border-bottom: 2px solid #C0C2DB;
  transition: border-bottom .4s ease;
}

.ho-renew__activities-list_nav button.-isActive {
  color: #000537;
  border-bottom-color: #000A6E;
}

@media (hover: hover) {
  .ho-renew__activities-list_nav button:hover {
    border-bottom-color: #000A6E;
  }
}

.ho-renew__activities-list_card {
  display: flex;
  flex-direction: column;
  gap: 1.6rem 0;
  padding: 1.6rem;
  background: #fff;
}

.ho-renew__activities-list_card-name {
  display: flex;
  align-items: center;
  height: 4.8rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 150%;
  color: #000A6E;
  letter-spacing: 4%;
}

.ho-renew__activities-list_card-image {
  position: relative;
  z-index: 1;
}

.ho-renew__activities-list_card-image img {
  position: relative;
  z-index: 0;
  display: block;
}

.ho-renew__activities-list_card-image p {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding-right: .8rem;
  padding-left: .8rem;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 4%;
  background: #000A6E;
}

.ho-renew__activities-list_card-text {
  font-size: 1.4rem;
  line-height: 150%;
  color: #000537;
  letter-spacing: 4%;
}

.ho-renew__activities-list_card-button {
  margin-top: auto;
}

.ho-renew__activities-list_block:not(.-isActive) {
  position: absolute;
  z-index: -9;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.ho-renew__activities-list_wrap::before,
.ho-renew__activities-list_wrap::after {
  position: absolute;
  top: 0;
  z-index: 2;
  display: block;
  width: calc(((100% - 1088px) / 2) - 1.6rem);
  height: 100%;
  content: "";
}

.ho-renew__activities-list_wrap::before {
  left: 0;
  background: linear-gradient(90deg,rgba(239, 240, 246, 1) 80%, rgba(239, 240, 246, 0.2) 100%);

}

.ho-renew__activities-list_wrap::after {
  right: 0;
  background: linear-gradient(270deg,rgba(239, 240, 246, 1) 80%, rgba(239, 240, 246, 0.2) 100%);
}

.ho-renew__activities-list .swiper-slide {
  height: auto;
}

.ho-renew__activities-list_button {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  aspect-ratio: 1 / 1;
  background: #000A6E;
  border-radius: .4rem;
  transition: opacity .4s ease;
}

@media screen and (width <= 767px) {
  .ho-renew__activities-list_button {
    display: none;
  }
}

@media (hover: hover) {
  .ho-renew__activities-list_button:hover {
    opacity: .6;
  }
}

.ho-renew__activities-list_button.-prev {
  left: 0;
  transform: translate(calc(-1 * (100% + .4rem)), -50%);
}

.ho-renew__activities-list_button.-next {
  right: 0;
  transform: translate(calc(100% + .4rem), -50%);
}

.ho-renew__activities-list_button img {
  width: 2rem;
}

.ho-renew__activities-list_pagination {
  display: flex;
  gap: 0 .8rem;
  justify-content: center;
  margin-top: .8rem;
}

.ho-renew__activities-list_pagination .swiper-pagination-bullet {
  width: .8rem;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  background: #B2B2B2;
  opacity: 1;
}

.ho-renew__activities-list_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #313992;
}

@media screen and (width >= 768px), print {
  .ho-renew__activities-list_pagination {
    display: none;
  }
}

/* ---------- Animation ---------- */

.fade-up {
  opacity: 0;
  transform: translateY(10rem);
  transition: opacity 1s ease, transform 1s ease;
}

@media screen and (width <= 767px) {
  .fade-up.fade-up-sp-visually {
    opacity: 1;
    transform: none;
  }
}

.fade-up.is-visible {
  opacity: 1;
  transform: none;
}

/* -------------------- /components -------------------- */

.ho-renew-wrap {
  display: flex;
  flex-direction: column;
  gap: 8rem 0;
  padding-top: 0;
  padding-bottom: 8rem;
  overflow: hidden;
  background: #eff0f6;
}

.ho-renew-wrap img {
  vertical-align: bottom;
}

@media screen and (width >= 768px), print {
  .ho-renew-wrap {
    padding-top: 4rem;
  }
}

.ho-renew-contents {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1088px;
  margin-right: auto;
  margin-left: auto;
}

.ho-renew__about {
  display: flex;
  flex-direction: column;
  gap: 1.6rem 4rem;
  align-items: center;
}

@media screen and (width >= 768px), print {
  .ho-renew__about {
    flex-direction: row;
  }
}

.ho-renew__about-image {
  flex-shrink: 0;
  padding: .8rem 1.6rem;
}

@media screen and (width >= 768px), print {
  .ho-renew__about-image {
    width: 352px;
  }
}

.ho-renew__map {
  display: flex;
  flex-direction: column;
  gap: 1.6rem 0;
  margin-top: 3.2rem;
}

.ho-renew__map-legend {
  display: flex;
  flex-direction: column;
  gap: .8rem 0;
}

@media screen and (width >= 768px), print {
  .ho-renew__map-legend {
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
  }
}

.ho-renew__map-legend li {
  display: flex;
  gap: 0 .8rem;
  font-size: 1.2rem;
  line-height: 170%;
  color: #000537;
  letter-spacing: 4%;
}

.ho-renew__map-legend li::before {
  display: block;
  width: 2rem;
  height: 2rem;
  content: "";
  background: red;
}

.ho-renew__map-legend li:nth-of-type(1)::before {
  background: #000A6E;
}

.ho-renew__map-legend li:nth-of-type(2)::before {
  background: #FF0000;
}

.ho-renew__map-legend li:nth-of-type(3)::before {
  background: #78AADC;
}

.ho-renew__map-legend li:nth-of-type(4)::before {
  background: #FFAAB4;
}

.ho-renew__partnership {
  display: flex;
  flex-direction: column;
  gap: 1.6rem 0;
}

@media screen and (width >= 768px), print {
  .ho-renew__partnership {
    flex-direction: row;
    gap: 0 4rem;
    align-items: center;
  }
}

@media screen and (width >= 768px), print {
  .ho-renew__partnership-image {
    flex-shrink: 0;
    max-width: 484px;
  }
}

.ho-renew__partnership-button {
  margin-top: 3.2rem;
}

@media screen and (width >= 768px), print {
  .ho-renew__partnership-button {
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
  }
}

.ho-renew__data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin-right: 1.6rem;
  margin-left: 1.6rem;
}


@media screen and (width >= 768px), print {
  .ho-renew__data {
    grid-template-columns: repeat(5, 1fr);
    gap: 0 1.6rem;
    margin-right: 0;
    margin-left: 0;
  }
}

.ho-renew__data li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: .8rem;
  padding: 1.6rem;
  background: #fff;
}

.ho-renew__data li:nth-of-type(1) {
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 1fr);
  grid-column: span 2 / span 2;
}

@media screen and (width >= 768px), print {
  .ho-renew__data li:nth-of-type(1) {
    grid-template-rows: subgrid;
    grid-template-columns: 1fr;
    grid-column: auto;
  }
}

.ho-renew__data li:nth-of-type(1) .ho-renew__data-name {
  grid-column: span 2 / span 2;
}

@media screen and (width >= 768px), print {
  .ho-renew__data li:nth-of-type(1) .ho-renew__data-name {
    grid-column: auto;
  }
}

.ho-renew__data li:nth-of-type(3) .ho-renew__data-data span {
  font-size: 2.4rem;
}

.ho-renew__data-name {
  align-self: center;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 150%;
  color: #000A6E;
  text-align: center;
  letter-spacing: 4%;
}

.ho-renew__data-image {
  align-self: center;
  max-width: 132px;
  margin-right: auto;
  margin-left: auto;
}

.ho-renew__data-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ho-renew__data-data p {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .4rem;
  align-items: baseline;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: #000537;
  text-align: center;
  letter-spacing: 4%;
}

.ho-renew__data-data span {
  font-family: "FCTOKYO-Condensed", sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
}

.ho-renew__data-data p.ho-renew__data-data_notes {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 170%;
  letter-spacing: 4%;
}

.ho-renew__members {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem .8rem;
  margin-bottom: 1.6rem;
}

@media screen and (width >= 768px), print {
  .ho-renew__members {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem 1.6rem;
    margin-bottom: 2.4rem;
  }
}

.ho-renew__members li {
  gap: .4rem 0;
  width: calc((100% - (.8rem * 2)) / 3);
}

@media screen and (width >= 768px), print {
  .ho-renew__members li {
    width: calc((100% - (1.6rem * 4)) / 5);
  }
}

.ho-renew__members li figure {
  display: flex;
  flex-direction: column;
  gap: .4rem 0;
}

.ho-renew__members li figcaption {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 170%;
  letter-spacing: 4%;
}

.ho-renew__members-notes {
  font-size: 1.2rem;
  letter-spacing: 4%;
}

.ho-renew__banner {
  display: flex;
  flex-direction: column;
  gap: 1.6rem 0;
  max-width: 400px;
  margin-right: 1.6rem;
  margin-left: 1.6rem;
}

@media screen and (width >= 768px), print {
  .ho-renew__banner {
    margin-right: auto;
    margin-left: auto;
  }
}

.ho-renew__banner li a:not(.ho-renew__button) {
  transition: opacity .4s ease;
}

@media (hover: hover) {
  .ho-renew__banner li a:hover {
    opacity: .6;
  }
}