.c-hero {
  min-height: 100svh;
  margin-top: calc(var(--header-height) * -1);
  margin-inline: calc(var(--container-padding) * -1);
  width: calc(100% + var(--container-padding) * 2);
  padding-bottom: var(--space-16);
  z-index: var(--z-index-base);
  pointer-events: none;
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media (orientation: landscape) {
  .c-hero {
    justify-content: flex-start;
    padding-top: 4rem;
  }
}

@media (width >= 60.0625rem) {
  .c-hero {
    justify-content: flex-start;
    height: auto;
    min-height: calc(100svh + 12rem);
    margin-bottom: -12rem;
    padding-block: 14rem 0;
  }
}

.c-hero:after {
  content: "";
  background-image: linear-gradient(180deg, rgba(250, 250, 250, 0) 72%, var(--bg-body) 100%),
      url("../images/home/img-kv-sp.webp");
  pointer-events: none;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media (width >= 60.0625rem) {
  .c-hero:after {
    background-image: linear-gradient(180deg, rgba(250, 250, 250, 0) 58%, var(--bg-body) 100%),
        url("../images/home/img-kv-desktop.webp");
  }
}

.c-hero__inner {
  z-index: var(--z-index-sm);
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  max-width: calc(var(--container-base) + var(--container-padding) * 2);
  padding-inline: var(--container-padding);
  flex-direction: column;
  margin-inline: auto;
  display: flex;
  position: relative;
}

@media (width >= 60.0625rem) {
  .c-hero__inner {
    padding-block: var(--space-20);
  }
}

.c-hero__lead {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  pointer-events: all;
}

@media (width >= 60.0625rem) {
  .c-hero__lead {
    font-size: var(--font-size-2xl);
  }
}

.c-hero__title {
  font-size: var(--font-size-5xl);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-navy);
  pointer-events: all;
}

@media (width >= 60.0625rem) {
  .c-hero__title {
    font-size: var(--font-size-8xl);
  }
}

.c-hero__scroll {
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  z-index: var(--z-index-sm);
  pointer-events: all;
  flex-direction: column;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: calc(100dvh - 3rem);
  left: 50%;
  transform: translate(-50%, -100%);
}

@media (width >= 60.0625rem) {
  .c-hero__scroll {
    top: calc(100dvh - 10.5rem);
  }
}

@media (width < 60.0625rem) and (height <= 43.75rem) {
  .c-hero__scroll {
    margin-top: var(--space-4);
    position: static;
    transform: none;
  }
}

.c-hero__scroll:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: .25rem;
}

.c-hero__scroll-text {
  font-family: var(--font-family-english);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-tight);
}

.c-hero__scroll-indicator {
  flex-direction: column;
  align-items: center;
  display: flex;
  position: relative;
}

.c-hero__scroll-indicator:before {
  content: "";
  display: none;
}

@media (width >= 60.0625rem) {
  .c-hero__scroll-indicator:before {
    background-color: var(--color-white);
    z-index: -1;
    border-radius: 50%;
    width: 4.8125rem;
    height: 4.8125rem;
    display: block;
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
  }
}

.c-hero__scroll-arrow {
  z-index: var(--z-index-sm);
  width: .3125rem;
  height: 2.96875rem;
  margin-left: .125rem;
  position: relative;
}

@media (width >= 60.0625rem) {
  .c-hero__scroll-arrow {
    height: 3.34375rem;
  }
}

.c-hero__scroll-orb {
  pointer-events: none;
  width: 4rem;
  max-width: none;
  height: 4rem;
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

@media (width >= 60.0625rem) {
  .c-hero__scroll-orb {
    width: 4.8125rem;
    height: 4.75rem;
  }
}

.c-about {
  z-index: var(--z-index-sm);
  margin-top: var(--space-8);
  background: var(--bg-white-translucent);
  padding: var(--space-10) var(--space-4);
  box-shadow: var(--shadow-card);
  border-radius: .5rem;
  position: relative;
}

@media (width >= 60.0625rem) {
  .c-about {
    padding: var(--space-13) var(--space-20);
  }
}

.c-about__inner {
  gap: var(--space-8);
  flex-direction: column;
  max-width: 61.5rem;
  margin: 0 auto;
  display: flex;
}

@media (width >= 60.0625rem) {
  .c-about__inner {
    gap: var(--space-10);
  }
}

.c-about__content {
  gap: var(--space-12);
  flex-direction: column;
  display: flex;
}

@media (width >= 60.0625rem) {
  .c-about__content {
    gap: var(--space-18);
  }
}

.c-about__block {
  gap: var(--space-4);
  flex-direction: column;
  display: flex;
}

.c-about__sub-header {
  gap: var(--space-1);
  flex-direction: column;
  display: flex;
}

.c-about__sub-heading {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
}

@media (width >= 60.0625rem) {
  .c-about__sub-heading {
    font-size: var(--font-size-2xl);
  }
}

.c-about__line {
  align-items: center;
  width: 100%;
  height: .3125rem;
  display: flex;
}

.c-about__line-accent {
  background-color: var(--color-primary);
  flex-shrink: 0;
  width: 1.5rem;
  height: 1px;
}

.c-about__line-base {
  background-color: var(--color-gray-medium);
  flex: 1;
  height: 1px;
}

.c-about__line-dot {
  background-color: var(--color-gray-medium);
  border-radius: 50%;
  flex-shrink: 0;
  width: .3125rem;
  height: .3125rem;
}

.c-about__theme-label {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  color: var(--color-primary);
}

@media (width >= 60.0625rem) {
  .c-about__theme-label {
    font-size: var(--font-size-xl);
  }
}

.c-about__theme-list {
  gap: var(--space-8);
  flex-direction: column;
  display: flex;
}

@media (width >= 60.0625rem) {
  .c-about__theme-list {
    gap: var(--space-2);
  }
}

.c-about__theme-item {
  gap: var(--space-3);
  flex-direction: column;
  display: flex;
}

@media (width >= 60.0625rem) {
  .c-about__theme-item {
    gap: var(--space-0);
  }
}

.c-about__theme-number {
  align-items: center;
  gap: var(--space-1);
  display: flex;
}

.c-about__theme-number:before {
  content: "";
  width: var(--border-width-4);
  border-top: var(--border-width) solid var(--color-gray-medium);
  border-bottom: var(--border-width) solid var(--color-gray-medium);
  flex-shrink: 0;
  align-self: stretch;
  display: block;
}

.c-about__theme-number:after {
  content: "";
  width: var(--border-width-4);
  border-top: var(--border-width) solid var(--color-gray-medium);
  border-bottom: var(--border-width) solid var(--color-gray-medium);
  flex-shrink: 0;
  align-self: stretch;
  display: block;
}

.c-about__theme-number:before {
  border-left: var(--border-width) solid var(--color-gray-medium);
}

.c-about__theme-number:after {
  border-right: var(--border-width) solid var(--color-gray-medium);
}

.c-about__theme-number-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-comfortable);
}

@media (width >= 60.0625rem) {
  .c-about__theme-number-text {
    font-size: var(--font-size-base);
  }
}

.c-about__theme-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
}

@media (width >= 60.0625rem) {
  .c-about__theme-title {
    line-height: var(--line-height-loose);
    font-size: var(--font-size-3xl);
  }
}

.c-about__schedule-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

@media (width >= 60.0625rem) {
  .c-about__schedule-label {
    line-height: var(--line-height-loose);
    font-size: var(--font-size-xl);
  }
}

.c-about__schedule-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
}

@media (width >= 60.0625rem) {
  .c-about__schedule-value {
    font-size: var(--font-size-3xl);
  }
}

.c-decor-photos {
  width: 100%;
  max-width: 80.5rem;
  margin: 0 auto;
  margin-top: var(--space-20);
}

@media (width >= 60.0625rem) {
  .c-decor-photos {
    margin-top: var(--space-28);
  }
}

.c-decor-photos__inner {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

@media (width >= 60.0625rem) {
  .c-decor-photos__inner {
    gap: 1.34375rem;
  }
}

.c-decor-photos__img {
  flex: 1;
}

@media (width >= 60.0625rem) {
  .c-decor-photos__img {
    flex: none;
    width: 25.9375rem;
  }
}

.c-decor-photos__img img {
  object-fit: contain;
  width: 100%;
  height: auto;
  display: block;
}

.c-community {
  background: var(--bg-white-translucent);
  margin-top: var(--space-20);
  padding: var(--space-10) var(--space-4);
  box-shadow: var(--shadow-card);
  border-radius: .5rem;
  position: relative;
}

@media (width >= 60.0625rem) {
  .c-community {
    margin-top: var(--space-28);
    padding: var(--space-13) var(--space-20);
  }
}

.c-community:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

@media (width >= 60.0625rem) {
  .c-community:before {
    width: 28.5625rem;
    height: 15.4375rem;
  }
}

.c-community:after {
  content: "";
  z-index: -1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

@media (width >= 60.0625rem) {
  .c-community:after {
    width: 28.5625rem;
    height: 15.4375rem;
  }
}

.c-community:before {
  background-image: url("../images/backgrounds/bg-cloud-1-sp.webp");
  width: 11.3125rem;
  height: 8.8125rem;
  top: -4.375rem;
  right: -4.375rem;
}

@media (width >= 60.0625rem) {
  .c-community:before {
    background-image: url("../images/backgrounds/bg-cloud-1.webp");
    width: 28.5625rem;
    height: 15.4375rem;
    top: -4.5rem;
    right: -18.9375rem;
  }
}

.c-community:after {
  background-image: url("../images/backgrounds/bg-cloud-2-sp.webp");
  width: 10.375rem;
  height: 8.8125rem;
  bottom: -4rem;
  left: -4.375rem;
}

@media (width >= 60.0625rem) {
  .c-community:after {
    background-image: url("../images/backgrounds/bg-cloud-2.webp");
    width: 32.4375rem;
    height: 27.8125rem;
    margin: auto;
    top: 0;
    bottom: 0;
    left: -16.1875rem;
  }
}

.c-community__inner {
  gap: var(--space-5);
  flex-direction: column;
  display: flex;
}

@media (width >= 60.0625rem) {
  .c-community__inner {
    gap: var(--space-13);
  }
}

.c-community__content {
  gap: var(--space-8);
  flex-direction: column;
  display: flex;
}

@media (width >= 60.0625rem) {
  .c-community__content {
    gap: var(--space-3);
  }
}

.c-community__description {
  flex-direction: column;
  display: flex;
}

.c-community__description p {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-spacious);
}

@media (width >= 60.0625rem) {
  .c-community__description p {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
  }
}

.c-community__cta {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 1.3125rem;
  display: flex;
}

.c-community__cta-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}

@media (width >= 60.0625rem) {
  .c-community__cta-text {
    font-size: var(--font-size-2xl);
  }
}

.c-community__cta-note {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}

.c-event-schedule {
  background: var(--bg-white-translucent);
  margin-top: var(--space-10);
  padding: var(--space-10) var(--space-4);
  box-shadow: var(--shadow-card);
  border-radius: .5rem;
}

@media (width >= 60.0625rem) {
  .c-event-schedule {
    margin-top: var(--space-28);
    padding: var(--space-13) var(--space-20);
  }
}

.c-event-schedule__inner {
  gap: var(--space-8);
  flex-direction: column;
  max-width: 61.5rem;
  margin: 0 auto;
  display: flex;
}

@media (width >= 60.0625rem) {
  .c-event-schedule__inner {
    gap: var(--space-10);
  }
}

.c-event-schedule__list {
  gap: var(--space-6);
  flex-direction: column;
  display: flex;
}

@media (width >= 60.0625rem) {
  .c-event-schedule__list {
    gap: var(--space-8);
  }
}

.c-event-schedule__item {
  flex-direction: column;
  display: flex;
}

.c-event-schedule__item-header {
  gap: var(--space-1);
  flex-direction: column;
  display: flex;
}

@media (width >= 60.0625rem) {
  .c-event-schedule__item-header {
    gap: var(--space-0);
  }
}

.c-event-schedule__item-number {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
  color: var(--color-primary);
}

@media (width >= 60.0625rem) {
  .c-event-schedule__item-number {
    line-height: var(--line-height-loose);
    font-size: var(--font-size-xl);
  }
}

.c-event-schedule__item-date {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}

@media (width >= 60.0625rem) {
  .c-event-schedule__item-date {
    line-height: var(--line-height-loose);
    font-size: var(--font-size-3xl);
  }
}

.c-event-schedule__item-description {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-spacious);
}

@media (width >= 60.0625rem) {
  .c-event-schedule__item-description {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
  }
}

.c-decoration {
  pointer-events: none;
  position: absolute;
}

.c-decoration--1 {
  z-index: var(--z-index-xl);
  right: 0;
  transform: translateY(-3.5rem);
}

@media (width >= 60.0625rem) {
  .c-decoration--1 {
    transform: translateY(-10.5rem);
  }
}

.c-decoration--2 {
  z-index: -1;
  left: 0;
  transform: translateY(-7.5rem);
}

@media (width >= 60.0625rem) {
  .c-decoration--2 {
    z-index: var(--z-index-xl);
    transform: translateY(-13.5rem);
  }
}