@charset "UTF-8";
/* CSS Document */
/*---------------------------------

  スタイル

---------------------------------*/
.futureBlock {
  padding: 7rem 0;
}
.futureBlock .wrapper {
  margin: auto;
  max-width: 98rem;
  width: 90%;
}
.futureBlock h1 {
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .25rem;
  margin-bottom: 3rem;
  padding-left: 1.5rem;
  text-align: center;
}
.futureBlock h1 span {
  display: inline-block;
}
.futureBlock h1 span:first-child {
  margin-right: 1em;
}
.futureBlock .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7rem;
}
.futureBlock .wrap .mainvisual {}
.futureBlock .wrap .mainvisual img {
  object-fit: contain;
  width: 100%;
  height: 40rem;
}
ul.futureList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0 2rem;
  list-style: none;
}
ul.futureList li:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}
ul.futureList li:nth-child(2) {
  grid-area: 2 / 1 / 3 / 2;
}
ul.futureList li:nth-child(3) {
  grid-area: 2 / 2 / 3 / 3;
}
ul.futureList li span {
  aspect-ratio: 1;
  border: 1px solid;
  border-radius: 50%;
  color: var(--link-color);
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
  width: 12rem;
}
.componentBox {
  font-size: .8em;
  line-height: 1.8;
  margin: 5rem auto;
}
.form {
  margin-top: 10rem;
}
.form iframe {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {
  .futureBlock h1 span:first-child {
    margin-right: 0;
  }
  .form iframe {
    height: 210rem;
  }
}
@media screen and (max-width: 580px) {
  .futureBlock {
    padding: 5rem 0;
  }
  .futureBlock h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .futureBlock .wrap {
    gap: 2rem;
  }
  .futureBlock .wrap .mainvisual img {
    height: 20rem;
  }
  ul.futureList {
    gap: 0rem 1rem;
  }
  ul.futureList li:nth-child(1) {
    transform: translateY(.5rem);
  }
  ul.futureList li span {
    font-size: .9em;
    width: 10rem;
  }
  .form {
    margin-top: 5rem;
  }
  .form iframe {
    height: 250rem;
  }
}
@media screen and (max-width: 380px) {
  ul.futureList {
    transform: scale(.9);
  }
  .form iframe {
    height: 290rem;
  }
}