#contents-menu {
  background: var(--color-background-sub-light) url(/assets/img/common/bg_dotted.svg) repeat center;
  background-attachment: fixed;
}
.l-hero {
  position: relative;
}
.l-hero:before {
  background-image: url(/assets/img/index/bg_hero.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  z-index: 1;
}
.l-hero {
  aspect-ratio: 16/8;
  max-width: 100%;
  width: 100%;
}
.c-hero-head__title {
  background: radial-gradient(50% 500% at 50% 50%, #7978c2 0, #343399 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 var(--size-8) var(--color-background-primary)) drop-shadow(0 0 var(--size-2) var(--color-background-primary));
  gap: 0.1em;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.c-hero-head__sub-title,
.c-hero-head__title {
  font-weight: 700;
  margin: 0;
}
.c-hero-photos {
  z-index: 2;
}
.c-hero-photos,
.c-hero-photos__item {
  position: absolute;
  transform-origin: center center;
}
.c-hero-photos__item {
  align-items: center;
  aspect-ratio: 1/1;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  left: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  will-change: transform, z-index;
}
.c-hero-photos__item--photo {
  background: linear-gradient(135deg, #e0e0e0, silver);
  border-radius: 50%;
  overflow: hidden;
}
.c-hero-photos__item--photo > img {
  aspect-ratio: 1/1;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
}
.c-hero-photos__item--text {
  overflow: hidden;
}
.c-hero-photos__letter {
  height: 60%;
  -o-object-fit: contain;
  object-fit: contain;
  width: 60%;
}
#message {
  background: url(/assets/img/index/bg_message.svg) no-repeat 100% 100%;
  background-size: contain;
}
.l-index-message {
  display: flex;
}
.c-message-image {
  border-radius: var(--size-8);
  box-shadow: 0 var(--size-4) var(--size-4) var(--color-shadow-medium);
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  overflow: hidden;
}
.c-message-image > img {
  height: auto;
  width: 100%;
}
.l-index-menu .c-card-link:first-child {
  grid-area: menu1;
}
.l-index-menu .c-card-link:nth-child(2) {
  grid-area: menu2;
}
.l-index-menu .c-card-link:nth-child(3) {
  grid-area: menu3;
}
@media (max-width: 768px) {
  #contents-menu {
    background-size: 600vw auto;
  }
  .l-hero:before {
    background-size: auto 100%;
    height: 80vw;
    left: 0;
    min-height: 125vw;
    right: 0;
    top: 15.625vw;
    width: 100%;
  }
  .l-hero {
    min-height: 125vw;
    padding: var(--size-32) var(--size-20) var(--size-20);
  }
  .c-hero-head__title {
    align-items: flex-start;
    font-size: var(--size-28);
    gap: var(--size-4);
    width: -moz-fit-content;
    width: fit-content;
  }
  .c-hero-head__sub-title {
    font-size: var(--size-16);
    margin-top: var(--size-8);
    padding-left: var(--size-20);
  }
  .c-hero-photos {
    bottom: var(--size-48);
    height: 62.5vw;
    left: var(--size-20);
    right: var(--size-20);
  }
  .c-hero-photos__item {
    height: 22.5vw;
    width: 22.5vw;
  }
  .l-section {
    padding-block: var(--size-20);
  }
  #message {
    background-position: 100% 0;
    background-size: 90% auto;
  }
  .l-index-message {
    flex-direction: column-reverse;
    gap: var(--size-20);
  }
  .l-index-message .c-card-title__main {
    white-space: nowrap;
    word-break: keep-all;
  }
  .l-index-message .c-message-image {
    width: 100%;
  }
  .l-index-message .c-message-contents__text {
    margin-block: var(--size-14);
  }
  .l-index-message .c-btn {
    border-radius: var(--size-8);
    font-size: var(--size-20);
    margin-top: var(--size-20);
    padding: var(--size-12);
    text-align: center;
    width: 100%;
  }
  .l-index-menu .c-card-link:first-child .c-card {
    padding-bottom: 40vw;
  }
  .l-index-menu .c-card-link + .c-card-link {
    margin-top: var(--size-20);
  }
}
@media (min-width: 769px) and (max-width: 1280px) {
  #contents-menu {
    background-size: 150vw auto;
  }
  .c-hero-head {
    left: 6.25vw;
  }
  .c-hero-head__title {
    font-size: var(--size-40);
  }
  .c-hero-head__sub-title {
    font-size: var(--size-24);
    margin-top: var(--size-4);
    padding-left: var(--size-28);
  }
  .c-hero-photos {
    height: 50vw;
    right: 0;
    top: var(--size-40);
    width: 56.25vw;
  }
  .c-hero-photos__item {
    height: 13.281vw;
    width: 13.281vw;
  }
  #message {
    padding-block: var(--size-64);
  }
  .l-index-message .c-message-image {
    width: 40%;
  }
  .l-index-message .c-message-contents__text {
    margin-block: var(--size-24);
  }
}
@media (min-width: 1281px) and (max-width: 1920px) {
  #contents-menu {
    background-size: 100vw auto;
  }
  .c-hero-head {
    left: 6.25vw;
  }
  .c-hero-head__title {
    font-size: var(--size-64);
  }
  .c-hero-head__sub-title {
    font-size: var(--size-40);
    margin-top: var(--size-16);
    padding-left: var(--size-56);
  }
  .c-hero-photos {
    height: 44.688vw;
    right: 0;
    top: var(--size-80);
    width: 52.708vw;
  }
  .c-hero-photos__item {
    height: 13.281vw;
    width: 13.281vw;
  }
  .l-index-message .c-message-image {
    width: 41.667vw;
  }
  .l-index-message .c-message-contents__text {
    margin-block: var(--size-32);
  }
}
@media (min-width: 1921px) {
  #contents-menu {
    background-size: 75vw auto;
  }
  .c-hero-head {
    left: 6.25vw;
  }
  .c-hero-head__title {
    font-size: var(--size-80);
  }
  .c-hero-head__sub-title {
    font-size: var(--size-48);
    margin-top: var(--size-16);
    padding-left: var(--size-56);
  }
  .c-hero-photos {
    height: 33.516vw;
    right: var(--size-160);
    top: var(--size-160);
    width: 39.531vw;
  }
  .c-hero-photos__item {
    height: 12.5vw;
    width: 12.5vw;
  }
  .l-index-message {
    gap: var(--size-120);
  }
  .l-index-message .c-message-image {
    width: 31.25vw;
  }
  .l-index-message .c-message-contents__text {
    margin-block: var(--size-40);
  }
}
@media (min-width: 769px) {
  #header {
    position: fixed;
  }
  .l-hero:before {
    height: 54.115vw;
    left: 0;
    top: 13.021vw;
    width: 80.052vw;
  }
  .l-hero {
    min-height: min(100dvh, 56.25vw);
  }
  .c-hero-head {
    position: absolute;
    top: 50%;
    translate: 0 -75%;
    z-index: 10;
  }
  .l-index-message {
    align-items: flex-start;
    gap: var(--size-64);
  }
  .c-message-contents .c-message-contents__text {
    font-size: var(--size-20);
  }
  #contents-menu {
    padding-block: var(--size-40);
  }
  .l-index-menu {
    display: grid;
    gap: var(--size-28);
    grid-template-areas: "menu1 menu1" "menu2 menu3";
  }
}
@media (orientation: portrait) {
  .l-hero {
    aspect-ratio: auto;
  }
}
@media (orientation: portrait) and (max-width: 768px) {
  .l-hero {
    min-height: 131.25vw;
  }
}
@media (min-width: 1281px) {
  #message {
    padding-block: var(--size-120);
  }
  .l-index-message {
    gap: var(--size-80);
  }
  .c-message-contents .c-message-contents__text {
    font-size: var(--size-24);
  }
  #contents-menu {
    padding-block: var(--size-80);
  }
  .l-index-menu {
    gap: var(--size-48);
  }
}