@media (width > 768px) {
  .l-header.--scrolled:not(.--active) .l-header__inner {
    height: var(--header-height) !important;
  }
  .l-header.--scrolled:not(.--active) .l-header__logo {
    padding-block: 1.5rem;
  }
  .l-header.--scrolled.--active .l-header__logo {
    padding-block: 0.5rem;
  }
}
.l-main {
  padding-block-end: 1rem;
}

.mainvisual {
  --copy-font-color: #000;
  --copy-shadow-color: var(--copy-shadow-color-light);
  --copy-shadow-color-dark: color-mix(in srgb, #000 80%, transparent);
  --copy-shadow-color-light: color-mix(in srgb, #fff 80%, transparent);
  --copy-duration: .8s;
  position: relative;
}
@media (width <= 1000px) and (width > 768px) {
  .mainvisual .l-container {
    max-width: 583px;
  }
}
.mainvisual__copy {
  position: absolute;
  z-index: 2;
  aspect-ratio: 408/143;
  width: 47.8rem;
  height: auto;
  color: var(--copy-font-color);
  transition: color var(--copy-duration) ease;
}
@media (width > 768px) {
  .mainvisual__copy {
    right: calc(50% + 5.6rem);
    top: 17.4rem;
  }
}
@media (width <= 768px) {
  .mainvisual__copy {
    left: 3rem;
    top: 4rem;
    width: 15.3rem;
  }
}
.mainvisual__copy .inner {
  position: absolute;
  inset: 0;
  background: currentColor;
  mask: url(../../assets/img/catchcopy_01.svg) no-repeat center/contain;
}
.mainvisual:has(.swiper-slide-active.--dark) {
  --copy-font-color: #fff;
  --copy-shadow-color: var(--copy-shadow-color-dark);
}
@media (width <= 768px) {
  .mainvisual:has(.swiper-slide-active.--sp-dark) {
    --copy-font-color: #fff;
    --copy-shadow-color: var(--copy-shadow-color-dark);
  }
}
@media (width > 768px) {
  .mainvisual:has(.swiper-slide-active.--pc-dark) {
    --copy-font-color: #fff;
    --copy-shadow-color: var(--copy-shadow-color-dark);
  }
}
.mainvisual__slide {
  position: relative;
  z-index: 5;
}
.mainvisual__slide .swiper-slide img {
  object-fit: cover;
}
@media (width > 768px) {
  .mainvisual__slide .swiper-slide img {
    height: 76.8rem;
  }
}
@media (width <= 768px) {
  .mainvisual__slide .swiper-slide img {
    aspect-ratio: 375/240;
  }
}
.mainvisual__slide .c-swiper-controller {
  position: absolute;
  inset-inline: 0;
  z-index: 5;
}
@media (width > 768px) {
  .mainvisual__slide .c-swiper-controller {
    bottom: 15.5rem;
  }
}
@media (width <= 768px) {
  .mainvisual__slide .c-swiper-controller {
    top: calc(100% + 1.5rem);
  }
}
.mainvisual .l-container:has(.mainvisual__cards) {
  position: relative;
  z-index: 10;
}
.mainvisual__cards {
  display: grid;
  gap: var(--base-grid-gap);
  grid-template-columns: repeat(var(--col), 1fr);
  grid-auto-rows: calc((100cqi - var(--base-grid-gap) * (var(--col) - 1)) / var(--col));
}
@media (width > 1000px) {
  .mainvisual__cards {
    --col: 5;
    margin-block-start: -61rem;
    pointer-events: none;
  }
}
@media (width <= 1000px) {
  .mainvisual__cards {
    --col: 2;
    margin-block-start: 6rem;
  }
}
@media (width <= 1000px) and (width > 768px) {
  .mainvisual__cards {
    margin-block-start: -12rem;
  }
}
@media (width > 1000px) {
  .mainvisual__cards .c-photo-card {
    pointer-events: all;
  }
  .mainvisual__cards .c-photo-card.card-01 {
    grid-column-start: 1;
    grid-row: 2/span 2;
  }
  .mainvisual__cards .c-photo-card.card-02 {
    grid-column-start: 4;
    grid-row-start: 3;
  }
  .mainvisual__cards .c-photo-card.card-03 {
    grid-column: span 1/-1;
    grid-row: 1/span 2;
  }
  .mainvisual__cards .c-photo-card.card-04 {
    grid-column: 2/span 2;
    grid-row: 3/4;
  }
  .mainvisual__cards .c-photo-card.card-05 {
    grid-column-start: 5;
    grid-row-start: 3;
  }
}
@media (width <= 1000px) {
  .mainvisual__cards .c-photo-card {
    grid-column: 1/span 2;
  }
  .mainvisual__cards .c-photo-card.card-01 {
    grid-column: 1/span 1;
  }
  .mainvisual__cards .c-photo-card.card-02 {
    grid-column: 1/span 1;
    grid-row-start: 2;
  }
  .mainvisual__cards .c-photo-card.card-03 {
    grid-column: 2/span 1;
    grid-row: 1/3;
  }
}
@media (width <= 1000px) and (width > 768px) {
  .mainvisual__cards .c-photo-card .layer {
    padding: 20px;
  }
  .mainvisual__cards .c-photo-card .category {
    font-size: 20px;
  }
  .mainvisual__cards .c-photo-card .title {
    font-size: 23px;
  }
}

#topics {
  margin-block-start: 7rem;
  padding-block-end: 7rem;
}
@media (width <= 768px) {
  #topics {
    margin-block-start: 6rem;
    padding-block-end: 4rem;
  }
}

.topics-slide {
  --topics-card-width: 75.3rem;
  position: relative;
}
@media (width <= 768px) {
  .topics-slide {
    --topics-card-width: 26rem;
  }
}
.topics-slide .swiper-wrapper {
  align-items: stretch;
}
.topics-slide .c-swiper-navigation {
  position: absolute;
  top: 50%;
  z-index: 5;
  translate: 0 -50%;
  inset-inline: 0;
  width: var(--topics-card-width);
  margin-inline: auto;
}
.topics-slide .c-swiper-controller {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 4rem);
}
@media (width <= 768px) {
  .topics-slide .c-swiper-controller {
    top: calc(100% + 1.2rem);
  }
}
.topics-slide .c-topics-card {
  width: var(--topics-card-width);
}

#intro {
  margin-block-start: 6rem;
}
@media (width <= 768px) {
  #intro {
    margin-block-start: 4.8rem;
  }
}
@media (width <= 768px) {
  #intro .text-wrap {
    margin-inline: 1.5rem;
  }
}
#intro .text-wrap .main {
  display: inline;
  color: var(--color-blue);
  font-family: var(--font-family-en);
  font-size: 16.7rem;
  letter-spacing: -0.02em;
  line-height: 1.0838323353;
}
@media (width <= 768px) {
  #intro .text-wrap .main {
    font-size: 6.6rem;
    line-height: 1.0606060606;
    white-space: nowrap;
  }
}
#intro .text-wrap .sub {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.92;
}
@media (width <= 768px) {
  #intro .text-wrap .sub {
    margin-block-start: 1.4rem;
    font-size: 1.6rem;
  }
}

#search {
  margin-block-start: 15.5rem;
}
@media (width <= 768px) {
  #search {
    margin-block-start: 7rem;
  }
}
#search:has(.category-navi button.--active) .more-button {
  display: none;
}
@media (width > 768px) {
  #search:not(:has(.category-navi button.--active)):has(.more-button input:checked) .result-area .c-photo-card:nth-child(n+7) {
    display: block;
  }
}
@media (width <= 768px) {
  #search:not(:has(.category-navi button.--active)):has(.more-button input:checked) .result-area .c-photo-card:nth-child(n+5) {
    display: block;
  }
}
@media (width > 768px) {
  #search:not(:has(.category-navi button.--active)) .result-area .c-photo-card:nth-child(n+7) {
    display: none;
  }
}
@media (width <= 768px) {
  #search:not(:has(.category-navi button.--active)) .result-area .c-photo-card:nth-child(n+5) {
    display: none;
  }
}
#search .desc {
  margin-block-end: 7.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}
@media (width <= 768px) {
  #search .desc {
    margin-block-end: 2.2rem;
    font-size: 1.3rem;
  }
}
#search .category-navi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4.2rem 6.8rem;
}
@media (width <= 768px) {
  #search .category-navi {
    gap: 2rem 1.2rem;
  }
}
#search .category-navi > li {
  transition: opacity 0.3s ease;
}
#search .category-navi > li:active, #search .category-navi > li:hover {
  opacity: 0.7;
}
@media (width <= 768px) {
  #search .category-navi > li:nth-child(3) {
    width: 100%;
  }
}
#search .category-navi button {
  display: grid;
  place-content: center;
  margin-inline: auto;
  border: 0.1rem solid;
  color: var(--color-blue);
  font-size: 2rem;
  border-radius: 50vw;
  width: 29rem;
  min-height: 6.6rem;
}
@media (width <= 768px) {
  #search .category-navi button {
    width: calc((100cqi - 1.2rem) / 2);
    min-height: 4.2rem;
    font-size: 1.2rem;
  }
}
#search .category-navi button.--active {
  background-color: var(--color-blue);
  color: #fff;
}
#search .result-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--base-grid-gap);
  margin-block-start: 7rem;
}
@media (width <= 768px) {
  #search .result-area {
    grid-template-columns: repeat(2, 1fr);
    margin-block-start: 2.4rem;
  }
}
#search .result-area .c-photo-card {
  animation: fadeIn 0.3s ease;
  transition: 0.3s ease;
}
@media (width > 768px) {
  #search .result-area .c-photo-card {
    height: 23.8rem;
  }
}
@media (width <= 768px) {
  #search .result-area .c-photo-card {
    height: calc((100cqi - var(--base-grid-gap)) / 2);
  }
}
#search .result-area .c-photo-card.--fade-out {
  opacity: 0;
  scale: 0.8;
}
#search .more-button {
  transition: opacity 0.3s ease;
  display: grid;
  place-content: center;
  justify-items: center;
  margin-block-start: 3.8rem;
  padding: 1rem;
  border: 0.1rem solid;
  text-align: center;
  color: var(--color-blue);
  font-family: var(--font-family-en);
  font-size: 2rem;
  font-weight: 400;
  cursor: pointer;
}
#search .more-button:active, #search .more-button:hover {
  opacity: 0.7;
}
@media (width <= 768px) {
  #search .more-button {
    margin-block-start: 1.8rem;
  }
}
#search .more-button::before {
  content: "View More";
}
#search .more-button::after {
  display: block;
  content: "";
  aspect-ratio: 10/8;
  width: 1.8rem;
  background-color: currentColor;
  mask: url(../../assets/img/icn_arrow_01_b.svg) center/cover no-repeat;
}
#search .more-button:has(input:checked)::before {
  content: "Close";
}
#search .more-button:has(input:checked)::after {
  rotate: x 180deg;
}
#search .more-button input {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
#information {
  margin-block-start: 13.5rem;
}
@media (width <= 768px) {
  #information {
    margin-block-start: 6rem;
  }
}
#information .info-cards {
  display: flex;
  gap: var(--base-grid-gap);
  flex-grow: 1;
  padding-block: 10rem;
  background-color: #ebebfa;
  box-shadow: 0 0 0 50vw #ebebfa;
  clip-path: inset(0 -50vw);
}
@media (width <= 768px) {
  #information .info-cards {
    flex-direction: column;
    padding-block: 4rem;
  }
}
@media (width > 768px) {
  #information .info-cards .c-photo-card {
    flex: 1;
    aspect-ratio: 624/337;
  }
}
@media (width <= 768px) {
  #information .info-cards .c-photo-card {
    height: calc((100cqi - var(--base-grid-gap)) / 2);
  }
}/*# sourceMappingURL=top.css.map */