/* ------------------------------------------- */
/* トップページ
/* ------------------------------------------- */

/* ヘッダー */
.header {
  height: 50px;
  display: flex;
  align-items: center;
  @media (768px <= width < 1024px) {
    height: 60px;
  }
  @media (1024px <= width) {
    height: 80px;
  }
}
.header__logo {
  margin-left: var(--spacing-2);
  @media (768px <= width < 1024px) {
    margin-left: var(--spacing-3);
  }
  @media (1024px <= width) {
    margin-left: var(--spacing-4);
  }
}
.header__logo-image {
  width: 80px;
  aspect-ratio: var(--conio-logo-aspect-ratio);
  @media (768px <= width < 1024px) {
    width: 100px;
  }
  @media (1024px <= width) {
    width: 130px;
  }
}

/* イントロ */
.intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(100vw / 1200 * 40), 40px);
  height: min(calc(100vw / 1200 * 600), 600px);
  background-image: url("bg.jpg"),
    linear-gradient(
      to bottom right,
      var(--conio-color-1),
      var(--conio-color-2),
      var(--conio-color-3),
      var(--conio-color-4),
      var(--conio-color-5)
    );
  background-size: cover;
}
.intro__image {
  margin-top: min(calc(100vw / 1200 * 40), 40px);
  width: min(calc(100vw / 1200 * 400), 400px);
  aspect-ratio: 400 / 500;
  background-image: url("conio-image-shadow.png");
  background-size: contain;
}
.intro__text {
  text-align: center;
  color: white;
  font-size: min(calc(100vw / 1200 * 36), 36px);
  font-weight: var(--font-weight-medium);
}
.intro__text strong {
  font-size: min(calc(100vw / 1200 * 72), 72px);
  font-weight: var(--font-weight-black);
}
.intro__text strong span {
  font-weight: var(--font-weight-medium);
}
.intro__text strong span:first-child {
  margin-inline-start: -0.5em;
}
.intro__text strong span:last-child {
  margin-inline-end: -0.25em;
}
.intro__text em {
  font-size: min(calc(100vw / 1200 * 84), 84px);
}

/* アウトロ */
.outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: min(calc(100vw / 1024 * 80), 80px);
}
.outro__text {
  padding-top: min(calc(100vw / 768 * 64), 64px);
  font-weight: var(--font-weight-bold);
  font-size: clamp(12px, calc(100vw / 768 * 30), 30px);
}
.outro__logo-image {
  margin-top: var(--spacing-2);
  width: clamp(120px, calc(100vw / 768 * 280), 280px);
  aspect-ratio: var(--conio-logo-aspect-ratio);
}
.outro__button-link {
  margin-top: min(calc(100vw / 1024 * 32), 32px);
  font-size: clamp(16px, calc(100vw / 1024 * 24), 24px);
  padding-block: clamp(16px, calc(100vw / 1024 * 24), 24px);
  padding-inline: clamp(26px, calc(100vw / 1024 * 40), 40px);
}
.outro__button-link span {
  padding-inline: 1.5em;
}