body #particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.hero {
  height: 100vh;
  min-height: 76.8rem;
  position: relative;
  background-image: url("../images/mv-logo.svg");
  background-repeat: no-repeat;
  background-size: 124.6rem;
  background-position: center top 30.5rem;
}
@media screen and (max-width: 920px) {
  .hero {
    height: 63.4rem;
    min-height: auto;
  }
}
.hero .hero__mv {
  opacity: 0;
  will-change: transform, opacity;
}
.hero .js-hero-title1 {
  opacity: 0;
  transform: translate(50px, 0);
}
.hero .js-hero-title2 {
  opacity: 0;
  transform: translate(-50px, 0);
}
.hero .js-hero-catch {
  opacity: 0;
  transform: translate(0, -50px);
}
.hero::before {
  content: "";
  position: absolute;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 6rem;
  background-image: url("../images/mv-bg.webp");
  background-size: contain;
  width: 98.7rem;
  height: 67.8rem;
  background-repeat: no-repeat;
  z-index: -1;
}
@media screen and (max-width: 920px) {
  .hero::before {
    width: 100%;
    height: 31.8rem;
    top: 9.52rem;
    background-size: 46.3rem;
    background-position: center;
  }
}
.hero__circle {
  position: absolute;
  z-index: -1;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 70rem;
  height: 70rem;
  top: 4.9rem;
}
.hero__circle img {
  animation: r1 30s linear infinite;
}
@media screen and (max-width: 920px) {
  .hero__circle {
    overflow: hidden;
    width: 32.9rem;
    height: 32.9rem;
    top: 10.4rem;
  }
}
@keyframes r1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.hero__inner {
  max-width: 124.6rem;
  margin: auto;
  height: 100%;
  position: relative;
}
@media screen and (max-width: 920px) {
  .hero__inner {
    max-width: 100%;
  }
}
.hero__catch {
  position: absolute;
  bottom: 5.9rem;
  left: 0;
  width: 54.2rem;
  z-index: 4;
  mix-blend-mode: exclusion;
}
@media screen and (max-width: 920px) {
  .hero__catch {
    bottom: auto;
    left: 1.5rem;
    width: 32rem;
    top: 53.5rem;
  }
}
.hero__title1 {
  position: absolute;
  left: 0;
  top: 23.3rem;
  width: 27.1rem;
  z-index: 2;
}
@media screen and (max-width: 920px) {
  .hero__title1 {
    left: 1.5rem;
    top: 10.5rem;
    width: 14rem;
  }
  .hero__title1 img {
    width: 100%;
  }
}
.hero__title2 {
  position: absolute;
  top: 47.1rem;
  right: 0;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: right;
}
@media screen and (max-width: 920px) {
  .hero__title2 {
    right: 1.5rem;
    top: 12.7rem;
    white-space: nowrap;
    font-size: 1.2rem;
    width: 12.98rem;
  }
  .hero__title2 img {
    width: 100%;
  }
  .hero__title2 span {
    position: absolute;
    bottom: -3.9rem;
    left: 2rem;
  }
}
.hero__mvs {
  position: relative;
  max-width: 82.6rem;
  height: 100%;
  margin: 0 auto 0;
  padding-top: 20.4rem;
}
@media screen and (max-width: 920px) {
  .hero__mvs {
    margin-bottom: 6.5rem;
    padding-top: 24rem;
    max-width: 100%;
    height: 47rem;
  }
}
.hero__mv {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  left: -9rem;
}
.hero__mv > img {
  height: 56rem;
  width: auto;
  max-width: none;
}
@media screen and (max-width: 920px) {
  .hero__mv > img {
    height: 24rem;
  }
}
@media screen and (max-width: 920px) {
  .hero__mv {
    left: -0.5rem;
  }
}
.hero__mv:nth-child(2) {
  left: 12.4rem;
  z-index: 2;
}
@media screen and (max-width: 920px) {
  .hero__mv:nth-child(2) {
    left: 7.31rem;
  }
}
.hero__mv:nth-child(3) {
  left: 36rem;
  z-index: 5;
}
@media screen and (max-width: 920px) {
  .hero__mv:nth-child(3) {
    left: 16.8rem;
  }
}
.hero__mv:nth-child(4) {
  left: 53.5rem;
  z-index: 4;
}
@media screen and (max-width: 920px) {
  .hero__mv:nth-child(4) {
    left: 23.3rem;
  }
}
.hero .scroll-down {
  position: absolute;
  right: 0;
  bottom: 7rem;
}
@media screen and (max-width: 920px) {
  .hero .scroll-down {
    right: 1.5rem;
    bottom: -3rem;
    display: none;
  }
}
.hero .scroll-down::after {
  content: "";
  width: 1px;
  height: 17rem;
  background-color: #212121;
  position: absolute;
  bottom: -1.6rem;
  left: 50%;
  transform: translate(-50%, 100%);
}
@media screen and (max-width: 920px) {
  .hero .scroll-down::after {
    height: 11rem;
  }
}
.hero--v2 {
  background-image: none;
}
@media screen and (max-width: 920px) {
  .hero--v2 {
    height: 66.7rem;
  }
  .hero--v2 + .top-topics {
    margin-top: -4.3rem;
  }
}
.hero--v2::before {
  display: none;
}
.hero--v2 .hero__circle {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}
.hero--v2 .hero__title {
  position: absolute;
  inset: auto auto 8rem 0;
  width: 39.5rem;
  z-index: 20;
  opacity: 0;
  transform: translate(0, 20px) translateZ(0);
  transform-origin: bottom;
  animation: mvmain1 0.8s ease-out 0.9s forwards;
}
@media screen and (max-width: 920px) {
  .hero--v2 .hero__title {
    width: 23rem;
    inset: auto auto 18.5rem 2rem;
  }
}
.hero--v2 .hero-topics__inner .swiper {
  height: 100%;
  padding: 1rem;
}
.hero--v2 .hero-pickup {
  position: absolute;
  inset: auto 0 3rem auto !important;
  border-radius: 1.5rem;
  width: 45rem;
  height: 8.5rem;
  background: transparent;
  border: 1px solid #fff;
  backdrop-filter: blur(3px);
  --webkit-backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.01);
  z-index: 2;
}
@media screen and (max-width: 920px) {
  .hero--v2 .hero-pickup {
    max-width: calc(100% - 4rem);
    inset: auto 0 3rem 0 !important;
    margin: auto;
    height: 10rem;
  }
}
.hero--v2 .hero-pickup__title {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: bold;
  font-size: 2rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  position: absolute;
  transform: translate(0, -100%);
  top: -0.5rem;
  left: 2rem;
}
.hero--v2 .hero-pickup__title::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: var(--primary);
  display: inline-block;
  margin-right: 1rem;
}
.hero--v2 .splide__arrows--ttb .splide__arrow {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228.149%22%20height%3D%225.948%22%20viewBox%3D%220%200%208.149%205.948%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_35274%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2035274%22%20transform%3D%22translate(674.075%20-290.705)%20rotate(90)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26426%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026426%22%20transform%3D%22translate(279%20655)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_16699%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2016699%22%20transform%3D%22translate(12.751%2011.435)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_29185%22%20data-name%3D%22%E3%83%91%E3%82%B9%2029185%22%20d%3D%22M0%2C0%2C3.57%2C4.5%2C7.13%2C0%22%20transform%3D%22translate(4.497%200)%20rotate(90)%22%20fill%3D%22none%22%20stroke%3D%22%23212121%22%20stroke-width%3D%221.3%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.25rem;
  height: 1.25rem;
  background-color: transparent;
}
.hero--v2 .splide__arrows--ttb .splide__arrow--prev {
  inset: 2.6rem 2rem auto auto;
  transform: none;
}
@media screen and (max-width: 920px) {
  .hero--v2 .splide__arrows--ttb .splide__arrow--prev {
    right: 1.5rem;
  }
}
.hero--v2 .splide__arrows--ttb .splide__arrow--next {
  inset: 4.9rem 2rem auto auto;
  transform: scaleY(-1);
}
@media screen and (max-width: 920px) {
  .hero--v2 .splide__arrows--ttb .splide__arrow--next {
    right: 1.5rem;
    inset: auto 1.5rem 1.5rem auto;
  }
}
.hero--v2 .hero-pickup-navi-link {
  width: 100%;
  height: 8.5rem;
  display: grid;
  grid-template-columns: 9.5rem 29.5rem;
  padding: 1rem;
  gap: 1rem;
  align-items: center;
}
@media screen and (max-width: 920px) {
  .hero--v2 .hero-pickup-navi-link {
    height: 10rem;
  }
}
.hero--v2 .hero-pickup-navi-link__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 920px) {
  .hero--v2 .hero-pickup-navi-link__meta {
    gap: 1rem;
  }
}
.hero--v2 .hero-pickup-navi-link__date {
  font-family: "din-2014-narrow", sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.025em;
}
.hero--v2 .hero-pickup-navi-link__tag {
  font-size: 1.2rem;
  font-weight: bold;
  width: fit-content;
  padding: 0 1rem;
}
@media screen and (max-width: 920px) {
  .hero--v2 .hero-pickup-navi-link__tag {
    font-size: 1.1rem;
    font-weight: bold;
    width: fit-content;
    padding: 0 0.4rem;
    max-width: 10.5rem;
    white-space: nowrap;
  }
}
.hero--v2 .hero-pickup-navi-link__title {
  font-size: 1.4rem;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media screen and (max-width: 920px) {
  .hero--v2 .hero-pickup-navi-link__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    max-width: 17rem;
    font-size: 1.2rem;
    font-weight: 500;
  }
}
.hero--v2 .hero-pickup-navi-link img {
  width: 9.5rem;
  height: 6.5rem;
  border-radius: 0.5rem;
  object-fit: cover;
}
@media screen and (max-width: 920px) {
  .hero--v2 .hero-pickup-navi-link img {
    height: 8rem;
    width: 11.5rem;
  }
}
.hero--v2 .scroll-down {
  right: -3rem;
}
.hero--v2 .hero__catch-text {
  font-size: 4.8rem;
  letter-spacing: 0.3em;
  position: absolute;
  inset: 18.1rem auto auto -3.5rem;
  rotate: -17deg;
  font-weight: bold;
  font-family: "din-2014-narrow", sans-serif;
  color: #fff;
  opacity: 0;
  transform: translate(0, 20px) translateZ(0);
  transform-origin: bottom;
  animation: mvmain1 0.5s ease-out 0.5s forwards;
}
@media screen and (max-width: 920px) {
  .hero--v2 .hero__catch-text {
    inset: 8.9rem auto auto 2.15rem;
    font-size: 2.4rem;
  }
}
.hero canvas {
  z-index: -1;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  pointer-events: none;
}
.hero__main-image {
  width: 100rem;
  margin: auto;
  position: absolute;
  inset: 0;
  height: fit-content;
  opacity: 0;
  transform: translate(0, 20px) translateZ(0);
  transform-origin: bottom;
  animation: mvmain1 0.5s ease-out 0.1s forwards;
}
@keyframes mvmain1 {
  to {
    transform: translate(0, 0) translateZ(0);
    opacity: 1;
  }
}
@media screen and (max-width: 920px) {
  .hero__main-image {
    width: 100%;
    max-width: 37.5rem;
  }
}

.hero-topics {
  z-index: 20;
  background-color: #fff;
  border-radius: 0 5px 5px 0;
  height: 10.6rem;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-100%, 0) translateZ(0);
  animation: mvmain3 1s ease-out 1.1s forwards;
  border-left: 0;
}
.hero-topics::before {
  content: "";
  position: absolute;
  border-radius: 0 5px 5px 0;
  right: 0;
  background-color: #fff;
  top: 0;
  width: 500%;
  height: 100%;
}
@media screen and (max-width: 920px) {
  .hero-topics {
    width: calc(100% - 1.5rem);
    height: 11.5rem;
    padding: 1rem 1rem 1rem 2.5rem;
    bottom: 0;
    border: 0;
    border-radius: 0 5px 5px 0;
  }
}
.hero-topics__title {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: bold;
  font-size: 2rem;
  color: var(--primary);
  opacity: 0;
  display: flex;
  align-items: center;
  margin: -3.5rem 0 0;
  position: relative;
  animation: mvmain4 2s ease-out 2s forwards;
}
.hero-topics__title::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: var(--primary);
  display: inline-block;
  margin-right: 1rem;
}
@media screen and (max-width: 920px) {
  .hero-topics__title {
    font-size: 2rem;
    position: absolute;
    width: 100%;
    left: 1.5rem;
    top: 0;
    display: block;
    z-index: 3;
  }
}
.hero-topics__inner {
  max-width: 43.7rem;
  align-items: center;
}
@media screen and (max-width: 920px) {
  .hero-topics__inner {
    margin-left: 0;
  }
}
.hero-topics__inner .swiper {
  height: 9.5rem;
  padding: 2.2rem 0 1.8rem;
}
@media screen and (max-width: 920px) {
  .hero-topics__inner .swiper {
    margin-left: 0;
    padding: 0;
  }
}
.hero-topics__inner .c-list-link__date {
  font-size: 1.6rem;
}
.hero-topics__inner .c-list-link__tag {
  margin-top: 0;
}
.hero-topics__inner .c-list-link__title {
  max-width: 100%;
  font-size: 1.4rem;
  font-weight: normal;
}
@media screen and (max-width: 920px) {
  .hero-topics__inner .c-list-link__title {
    height: 4rem;
  }
}
.hero-topics__inner .c-slider-navis {
  position: absolute;
  right: -1rem;
  top: 0.9rem;
  z-index: 8;
  height: 100%;
  width: 6.4rem;
}
@media screen and (max-width: 920px) {
  .hero-topics__inner .c-slider-navis {
    right: -2.9rem;
    top: 0.6rem;
  }
}
.hero-topics__inner .c-slider-navi {
  width: 3rem;
  height: 3rem;
  background-color: #fff !important;
  border-radius: 100%;
  position: relative;
  --swiper-navigation-sides-offset: 0;
  --swiper-navigation-top-offset: 5rem;
}
@media screen and (max-width: 920px) {
  .hero-topics__inner .c-slider-navi {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.hero-topics__inner .c-slider-navi.c-slider-navi--prev {
  margin-bottom: 1rem;
  --swiper-navigation-top-offset: 4rem;
  top: 4rem;
  top: 1.5rem;
  position: absolute;
}
@media screen and (max-width: 920px) {
  .hero-topics__inner .c-slider-navi.c-slider-navi--prev {
    margin-bottom: 1rem;
    top: 0;
  }
}
@media screen and (max-width: 920px) {
  .hero-topics__inner .c-slider-navi.c-slider-navi--next {
    top: 4.5rem;
  }
}

@keyframes mvmain3 {
  to {
    transform: none;
  }
}
@keyframes mvmain4 {
  to {
    opacity: 1;
  }
}
.concept {
  padding: 5.7rem 0 10.5rem;
  position: relative;
  min-height: 89.7rem;
  background-image: url("../images/top/concept-bg.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center bottom;
}
@media screen and (max-width: 920px) {
  .concept {
    background-repeat: repeat;
    background-size: 250%;
    min-height: auto;
    padding: 0 0 6rem;
  }
}
.concept::before {
  content: "";
  z-index: -1;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 17rem);
  background: linear-gradient(rgba(116, 205, 209, 0) 0%, #84d0c6 44.76%, #0099d9 100%);
}
@media screen and (max-width: 920px) {
  .concept::before {
    height: 100%;
  }
}
.concept .c-auto-scrolls {
  position: relative;
  z-index: -1;
  margin-bottom: 14.3rem;
}
@media screen and (max-width: 920px) {
  .concept .c-auto-scrolls {
    gap: 0;
    top: -2rem;
    margin-bottom: 3.6rem;
  }
}
@media screen and (max-width: 920px) {
  .concept .c-auto-scrolls img {
    height: 6.7rem;
    width: auto;
  }
}
.concept .c-heading {
  position: relative;
  z-index: 2;
}
.concept__inner {
  max-width: 124.6rem;
  margin: auto;
  padding: 0 6rem;
}
@media screen and (max-width: 920px) {
  .concept__inner {
    padding: 0 1.5rem;
  }
}
.concept__row {
  display: flex;
  justify-content: space-between;
  gap: 10rem;
}
@media screen and (max-width: 920px) {
  .concept__row {
    display: block;
  }
}
.concept__logo {
  position: absolute;
  top: 2rem;
  left: -6rem;
  mix-blend-mode: overlay;
}
@media screen and (max-width: 920px) {
  .concept__logo {
    top: 38.5rem;
    left: 0;
  }
}
.concept__left {
  width: 56rem;
  position: relative;
}
@media screen and (max-width: 920px) {
  .concept__left {
    width: 100%;
    margin-bottom: 2rem;
  }
}
.concept__right {
  flex: 1;
  max-width: 53.2rem;
}
.concept__right p {
  line-height: 4rem;
  color: #fff;
  margin-bottom: 5rem;
}
@media screen and (max-width: 920px) {
  .concept__right p {
    margin-top: 5rem;
    margin-bottom: 3.5rem;
    font-size: 1.4rem;
    line-height: 3.5rem;
  }
}
.concept__title {
  margin-bottom: 3.5rem;
  position: relative;
}
@media screen and (max-width: 920px) {
  .concept__title {
    margin-bottom: 2.5rem;
  }
}
.concept__title.is-active .txt > span {
  opacity: 1;
  transform: none;
}
.concept__title.is-active .txt::before {
  transform: scaleX(1);
}
.concept__title > .txt {
  font-size: 3.2rem;
  line-height: 5.3rem;
  padding: 0.25em 1rem;
  width: fit-content;
  color: #0099d9;
  font-weight: bold;
  display: block;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.concept__title > .txt > span {
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: relative;
  transform: translate(0, 2em);
  z-index: 1;
  display: block;
  opacity: 0;
  transition-delay: 1s;
}
.concept__title > .txt::before {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 100%;
  top: 0;
  transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform-origin: left;
  left: 0;
  transform: scaleX(0);
}
@media screen and (max-width: 920px) {
  .concept__title > .txt {
    font-size: 2rem;
    white-space: nowrap;
    padding: 0.5rem 0.8rem;
    line-height: 1.75;
  }
}
.concept__title svg {
  width: 55.4rem;
  position: relative;
  top: -1rem;
}
@media screen and (max-width: 920px) {
  .concept__title svg {
    width: 34.5rem;
    position: absolute;
    top: 8.2rem;
  }
}

.concept__catch {
  color: #fff;
  margin: 12rem 0 5rem;
  font-weight: bold;
  font-size: var(--h1);
}
@media screen and (max-width: 920px) {
  .concept__catch {
    font-size: 2rem;
  }
}
@media screen and (max-width: 920px) {
  .concept {
    position: relative;
    overflow: hidden;
  }
}

.concept-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem 5rem;
}
@media screen and (max-width: 920px) {
  .concept-items {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.concept-item-wrap {
  transition: 1s;
  transform: rotate3d(0, -3.2, 0.5, 3.5521rad);
  will-change: transform;
  position: relative;
}
.concept-item-wrap::before {
  content: "";
  width: 35rem;
  height: 35rem;
  position: absolute;
  inset: auto auto 0 0;
  background-size: contain;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22319.587%22%20height%3D%22311.741%22%20viewBox%3D%220%200%20319.587%20311.741%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22radial-gradient%22%20cx%3D%220.5%22%20cy%3D%220.5%22%20r%3D%220.449%22%20gradientTransform%3D%22translate(-0.013%200.013)%20rotate(-1.459)%22%20gradientUnits%3D%22objectBoundingBox%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2374cdd1%22%20stop-opacity%3D%220.839%22%2F%3E%20%3Cstop%20offset%3D%220.448%22%20stop-color%3D%22%2384d0c6%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230099d9%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FradialGradient%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_164156%22%20data-name%3D%22%E3%83%91%E3%82%B9%20164156%22%20d%3D%22M238.193%2C116.247c-1.381%2C54.406-66.831%2C93.341-123.91%2C94.828S-4.686%2C145.357-3.305%2C90.951%2C43.474-2.242%2C100.553-3.728s139.021%2C65.57%2C137.64%2C119.976%22%20transform%3D%22matrix(0.839%2C%20-0.545%2C%200.545%2C%200.839%2C%204.835%2C%20132.886)%22%20opacity%3D%220.7%22%20fill%3D%22url(%23radial-gradient)%22%2F%3E%3C%2Fsvg%3E");
  background-position: left -13rem bottom -12rem;
  background-repeat: no-repeat;
}
.concept-item-wrap.is-active {
  transform: rotate3d(0, 1, 0.5, 0rad);
}
@media print, screen and (min-width: 921px) {
  .concept-item-wrap:nth-child(2) {
    transition-delay: 0.25s;
  }
  .concept-item-wrap:nth-child(3) {
    transition-delay: 0.5s;
  }
}

.concept-item {
  border-radius: 15px;
  background: transparent;
  border: 5px solid rgba(255, 255, 255, 0.51);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(4px);
  background-color: rgba(255, 255, 255, 0.02);
  padding: 3rem 2.5rem 4rem;
  color: #fff;
  height: 100%;
  position: relative;
  z-index: 2;
}
.concept-item__no {
  font-size: 2rem;
  font-family: "din-2014-narrow", sans-serif;
  font-weight: bold;
  margin-bottom: 1.5rem;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 920px) {
  .concept-item__no {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
}
.concept-item__no::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 100%;
  margin-right: 1rem;
  background-color: #fff;
}
@media screen and (max-width: 920px) {
  .concept-item__no::before {
    margin-right: 0.5rem;
  }
}
.concept-item__title {
  font-size: var(--h4);
  font-weight: bold;
  margin-bottom: 1em;
}

.department {
  padding: 15rem 0 12.5rem;
}
.department .c-department-item {
  transition: 1s cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 0;
  transform: translateY(20px);
}
.department .c-department-item.is-active {
  opacity: 1;
  transform: none;
}
@media screen and (max-width: 920px) {
  .department {
    padding: 7rem 0 8rem;
    overflow: hidden;
  }
}
.department .c-heading {
  position: relative;
  z-index: 2;
}
.department__inner {
  max-width: 124.6rem;
  margin: auto;
  padding: 0 6rem;
}
@media screen and (max-width: 920px) {
  .department__inner {
    width: 100%;
    padding: 0 1.5rem;
  }
}

.department-items {
  margin-top: 3rem;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(2, 48.8rem);
  gap: 6.5rem 8.65rem;
}
@media screen and (max-width: 920px) {
  .department-items {
    margin-top: 4rem;
    display: block;
  }
}

.top-card-sections {
  position: relative;
  background: linear-gradient(rgba(116, 205, 209, 0) 0%, #84d0c6 44.76%, rgba(0, 153, 217, 0) 100%);
  padding: 0 0 3rem;
}
.top-card-sections::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  background-image: url("../images/card-section-bg.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 920px) {
  .top-card-sections {
    margin-top: 0;
    padding: 3rem 0 0;
  }
}

.top-card-section {
  padding: 10rem 0;
  position: relative;
}
@media screen and (max-width: 920px) {
  .top-card-section {
    padding: 2rem 0 5rem;
  }
}
.top-card-section--2::before {
  content: "";
  width: 124.6rem;
  height: 1px;
  position: absolute;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 0;
  border-top: 1.5px solid #212121;
}
@media screen and (max-width: 920px) {
  .top-card-section--2::before {
    width: calc(100% - 3rem);
  }
}
@media screen and (max-width: 920px) {
  .top-card-section--2 {
    padding-top: 5rem;
  }
}
.top-card-section__inner {
  position: relative;
}
.top-card-section__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5rem;
}
@media screen and (max-width: 920px) {
  .top-card-section__head {
    margin-bottom: 3.5rem;
  }
}
.top-card-section__title {
  margin-left: 5rem;
  position: relative;
  z-index: 2;
  font-size: 4.8rem;
  font-family: "Zen Maru Gothic", serif;
  color: var(--primary);
}
@media screen and (max-width: 920px) {
  .top-card-section__title {
    margin-left: 0;
    width: 100%;
    font-size: 2.8rem;
  }
  .top-card-section__title--event {
    width: 12.2rem;
  }
}
.top-card-section__slider-wrap {
  padding-left: 13.3rem;
}
@media screen and (max-width: 920px) {
  .top-card-section__slider-wrap {
    padding-left: 0;
  }
}
.top-card-section__slider-wrap .swiper {
  position: static;
}
.top-card-section__list-button {
  margin-left: auto;
  text-align: right;
  align-self: end;
}
@media screen and (max-width: 920px) {
  .top-card-section__list-button {
    display: none;
  }
}
.top-card-section__button {
  margin-top: 10rem;
}
@media screen and (max-width: 920px) {
  .top-card-section__button {
    margin-top: 5rem;
  }
}
.top-card-section__human {
  position: absolute;
  left: 9.5rem;
  bottom: -14rem;
  width: 16.8rem;
}
@media screen and (max-width: 920px) {
  .top-card-section__human {
    width: 8.1rem;
    bottom: -13rem;
    z-index: 2;
    left: 1.5rem;
  }
}

.top-row-sections {
  position: relative;
  z-index: 3;
  padding: 0rem 0 0;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 920px) {
  .top-row-sections {
    margin-top: 2rem;
    padding-top: 3rem;
    padding-bottom: 0;
  }
}

.top-row-section {
  padding: 8rem 0 12rem;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 920px) {
  .top-row-section {
    padding: 3rem 0 5rem;
  }
}
.top-row-section::before {
  content: "";
  width: 124.6rem;
  height: 1px;
  position: absolute;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
  border-top: 1.5px solid #cee1df;
}
.top-row-section__inner {
  position: relative;
}

.top-row-section-box {
  position: relative;
}
@media screen and (max-width: 920px) {
  .top-row-section-box {
    width: 100%;
  }
}

.top-row-section-links {
  max-width: 46.3rem;
  margin-top: 8rem;
}
@media screen and (max-width: 920px) {
  .top-row-section-links {
    margin-top: 38rem;
  }
}

.top-row-section-link {
  margin-bottom: 2.5rem;
  font-size: var(--h3);
  font-weight: bold;
  border-bottom: 1px solid #212121;
  padding: 0 0 1rem 1rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  background-image: url("../images/link-arrow.svg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 2.5rem;
  transition: 0.3s;
}
@media screen and (max-width: 920px) {
  .top-row-section-link {
    background-position: right bottom 1rem;
    background-size: 2rem;
    gap: 1rem;
    font-size: var(--h4);
    margin-bottom: 2rem;
  }
}
.top-row-section-link:hover {
  opacity: 0.7;
  background-size: 3rem;
}
.top-row-section-link:last-child {
  margin-bottom: 0;
}

.top-row-section-item {
  display: flex;
  align-items: center;
  gap: 5rem;
  justify-content: space-between;
  position: relative;
}
@media screen and (max-width: 920px) {
  .top-row-section-item {
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}
.top-row-section-item__images {
  position: relative;
}
@media screen and (max-width: 920px) {
  .top-row-section-item__images {
    position: absolute;
    width: 100%;
    left: 0;
    top: 12rem;
  }
}
.top-row-section-item__images svg {
  position: absolute;
  right: -6rem;
  bottom: -6rem;
}
@media screen and (max-width: 920px) {
  .top-row-section-item__images svg {
    bottom: -2rem;
    left: 0;
  }
}
.top-row-section-item__images svg.v2 {
  bottom: -22rem;
}
@media screen and (max-width: 920px) {
  .top-row-section-item__images svg.v2 {
    bottom: -8rem;
  }
}
.top-row-section-item__image {
  position: relative;
}
.top-row-section-item__image--main {
  max-width: 39rem;
}
@media screen and (max-width: 920px) {
  .top-row-section-item__image--main {
    width: 25.8rem;
    margin-left: auto;
  }
}
.top-row-section-item__image--sub {
  --bottom: -7.5rem;
  max-width: 28rem;
  position: absolute;
  bottom: var(--bottom);
  left: -13rem;
}
@media screen and (max-width: 920px) {
  .top-row-section-item__image--sub {
    max-width: 18.5rem;
    bottom: auto;
    left: 0;
    top: var(--top_sp, 17.5rem);
  }
}

.top-voice {
  position: relative;
  margin-top: -30rem;
  padding: 40rem 0 18rem;
}
.top-voice::before {
  content: "";
  background-image: url("../images/top/voice-bg.webp");
  background-size: contain;
  position: absolute;
  width: 72.1rem;
  height: 78.3rem;
  right: 0;
  bottom: -4rem;
}
@media screen and (max-width: 920px) {
  .top-voice::before {
    background-position: right -27rem center;
  }
}
@media screen and (max-width: 920px) {
  .top-voice {
    margin-top: 0;
    padding: 5rem 0 7rem;
  }
}
.top-voice .js-voice-schint {
  overflow: hidden !important;
}
.top-voice .scroll-hint-icon-wrap {
  top: -10rem;
}
.top-voice__inner {
  position: relative;
}
.top-voice__title {
  margin-left: 5rem;
  margin-bottom: 5rem;
  font-size: 4.8rem;
  font-family: "Zen Maru Gothic", serif;
  color: var(--primary);
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 920px) {
  .top-voice__title {
    font-size: 2.8rem;
    margin: 0 0 3.5rem 0;
  }
}
.top-voice__slider-wrap {
  margin-top: 8rem;
}
@media screen and (max-width: 920px) {
  .top-voice__slider-wrap {
    padding-left: 0;
    margin-top: 3.5rem;
    margin-left: 0;
  }
}
.top-voice__slider-wrap .c-slider-navis {
  margin-left: 97rem;
  gap: 2.5rem;
  position: relative;
  top: 0;
}
.top-voice__human {
  position: absolute;
  right: 0;
  bottom: -10rem;
  width: 8.3rem;
}
@media screen and (max-width: 920px) {
  .top-voice__human {
    display: none;
  }
}
.top-voice__human--1 {
  right: 9rem;
}
@media screen and (max-width: 920px) {
  .top-voice__button {
    margin-top: 16rem;
  }
}

.top-topics {
  position: relative;
  padding: 5.3rem 0 8rem;
  overflow-x: clip;
}
@media screen and (max-width: 920px) {
  .top-topics {
    margin-bottom: 0;
    padding-left: 1.5rem;
    padding-top: 0;
    margin-top: 0;
  }
}
@media screen and (max-width: 920px) {
  .top-topics .top-card-section__list-button {
    display: block;
  }
}
.top-topics__inner {
  position: relative;
  padding: 3rem 0;
  margin-top: -4rem;
  z-index: 2;
}
@media screen and (max-width: 920px) {
  .top-topics__inner {
    padding: 3.5rem 0.5rem 3.5rem 1rem;
    margin-top: -1rem;
  }
}
.top-topics__inner::before {
  content: "";
  border-radius: 15px 0 0 15px;
  background: transparent;
  border: 5px solid rgba(255, 255, 255, 0.51);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.02);
  position: absolute;
  width: 500%;
  height: 100%;
  top: 0;
  left: 0;
}
@media screen and (max-width: 920px) {
  .top-topics__inner::before {
    width: 100%;
  }
}
.top-topics__title {
  position: relative;
  z-index: 2;
  font-size: 3.2rem;
}
@media screen and (max-width: 920px) {
  .top-topics__title {
    font-size: 2.4rem;
  }
}
.top-topics__row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 12rem;
}
@media screen and (max-width: 920px) {
  .top-topics__row {
    display: block;
    padding: 0 1rem;
  }
}
@media screen and (max-width: 920px) {
  .top-topics__head {
    margin-bottom: 3.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media print, screen and (min-width: 921px) {
  .top-topics__list-button {
    margin-top: 2rem;
    height: 5rem;
    line-height: 5rem;
    padding-left: 3.5rem;
    background-size: 2.5rem;
  }
}
@media screen and (max-width: 920px) {
  .top-topics__list-button {
    background-size: 2rem;
    line-height: 2rem;
    padding-left: 4rem;
    height: 2rem;
  }
}
.top-topics__link {
  position: relative;
  z-index: 2;
}
.top-topics__content {
  position: relative;
  z-index: 2;
}

.svg-animation1 {
  stroke-dasharray: 1000px;
  stroke-dashoffset: 230%;
  transition: 3s;
}
.svg-animation1.is-active {
  stroke-dashoffset: 0;
}

.svg-animation2 {
  stroke-dasharray: 1500px;
  stroke-dashoffset: 330%;
  transition: 3s;
}
.svg-animation2.is-active {
  stroke-dashoffset: 0;
}

@keyframes just {
  0% {
    stroke-dashoffset: 1500px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}
.top-card-section {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1s cubic-bezier(0.17, 0.8, 0.3, 1) 0.5s;
}
.top-card-section.is-active {
  opacity: 1;
  transform: none;
}

.top-voice {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1s cubic-bezier(0.17, 0.8, 0.3, 1) 0.5s;
}
.top-voice.is-active {
  opacity: 1;
  transform: none;
}

.top-row-section {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1s cubic-bezier(0.17, 0.8, 0.3, 1) 0.5s;
}
.top-row-section.is-active {
  opacity: 1;
  transform: none;
}