@charset "UTF-8";
body {
  background: #fff;
}

/* -------------------------------------------------------------------
　キービジュアル
------------------------------------------------------------------- */
#spececollection .ttlbox {
  background: url(../imgs/spacecollection/bg_ttl.webp) no-repeat center;
  background-size: cover;
}
#spececollection .ttlbox h2 {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------
　Space Collectionとは？
------------------------------------------------------------------- */
#lead {
  padding: 4.5rem 0rem;
  line-height: 1.875rem;
}
#lead h3.lead {
  margin-top: 1.5625rem;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}
#lead p.lead {
  margin-top: 1.2em;
}
#lead .f-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3.5625rem;
  gap: 1em;
}
#lead .f-container img {
  aspect-ratio: 390/205;
  object-fit: cover;
}
@media (max-width: 768px) {
  #lead {
    padding: 6.5625rem 0 1.5rem;
  }
  #lead .f-container {
    flex-direction: column;
  }
}

/* -------------------------------------------------------------------
　Space Collectionのメリット
------------------------------------------------------------------- */
#merit {
  padding: 4.5rem 0rem;
  background: #FFFBF2;
}
#merit .f-container {
  display: flex;
  align-items: flex-start;
  margin-top: 1.5625rem;
  gap: 2em;
}
#merit .f-container .imgs {
  flex: 0 0 34%;
  gap: 1em;
}
#merit .f-container .imgs img {
  margin-bottom: 40px;
}
#merit .f-container .txts {
  flex: 1;
}
#merit .f-container .txts .badge {
  font-size: 0.875rem;
  border-radius: 4px;
  color: #fff;
  background: #204731;
  width: fit-content;
  padding: 5px 10px;
  margin-bottom: 0.5em;
}
#merit .f-container .txts h4 {
  font-size: 1.25rem;
  color: #204731;
  font-weight: 700;
}
#merit .f-container .txts p {
  margin-top: 0.5em;
}
#merit .f-container .txts .mt60 {
  margin-top: 4rem;
}
@media (max-width: 768px) {
  #merit .f-container {
    flex-direction: column;
  }
}

/* -------------------------------------------------------------------
　Projectパッケージ内容
------------------------------------------------------------------- */
#package {
  padding: 4.5rem 0rem;
}
#package .f-container {
  display: flex;
  align-items: stretch;
  margin-top: 1.6875rem;
  gap: 3.5%;
}
#package .f-container.colnone {
  margin-top: 0;
  flex-wrap: wrap;
  justify-content: center;
}
#package .f-container .panel {
  width: 31%;
  padding: 1.6875rem 1.25rem;
  background: #F0F5F3;
  border-radius: 14px;
  text-align: center;
}
#package .f-container .panel h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #204731;
  margin-bottom: 0.5em;
}
#package .f-container .panel img {
  width: 85%;
  margin: 2em auto 0;
}
#package .f-container .panel .halfcol {
  width: 45%;
}
#package .f-container .panel .halfcol img {
  width: auto;
  height: 85px;
}
@media (max-width: 768px) {
  #package .f-container {
    flex-direction: column;
  }
  #package .f-container.colnone {
    flex-direction: initial;
  }
  #package .f-container .panel {
    width: 92vw;
    margin: 0.5em auto;
  }
}

/* -------------------------------------------------------------------
　トライアル実績
------------------------------------------------------------------- */
#trial {
  padding: 0 0 3.75rem;
}
#trial .f-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 1.6875rem;
  gap: 2em;
}
#trial .f-container div {
  width: 48%;
}
#trial .f-container div h5.subttl {
  font-size: 1.125rem;
  font-weight: 700;
  color: #204731;
  margin-bottom: 0.5em;
}
#trial .f-container div p {
  font-weight: 500;
}
#trial .f-container div p span {
  font-size: 1.125rem;
  font-weight: 700;
  color: #204731;
}
#trial .f-container div .mt1em {
  margin-top: 1.6em;
}
@media (max-width: 768px) {
  #trial .f-container {
    flex-direction: column;
  }
  #trial .f-container div {
    width: 95%;
    margin: 0 auto;
  }
  #trial .f-container .sp1 {
    order: 1;
  }
  #trial .f-container .sp2 {
    order: 2;
  }
  #trial .f-container .sp3 {
    order: 3;
  }
  #trial .f-container .sp4 {
    order: 4;
  }
  #trial .f-container .sp5 {
    order: 5;
  }
  #trial .f-container .sp6 {
    order: 6;
  }
}
#trial .catch {
  color: #204731;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  text-align: center;
}
@media (max-width: 768px) {
  #trial .catch {
    padding: 0 1em;
  }
}
#trial .catch span.t28 {
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  font-weight: 800;
}
#trial .catch span.t30 {
  font-size: 1.875rem;
  font-weight: 800;
}
#trial .catch span.t40 {
  font-size: 2.5rem;
  font-weight: 900;
}

/* -------------------------------------------------------------------
　共通パーツ
------------------------------------------------------------------- */
p.lead {
  margin-top: 1.8125rem;
  text-align: center;
  line-height: 1.875;
}

.maker {
  width: fit-content;
  margin: 2.8rem auto 2rem;
}

/*# sourceMappingURL=spacecollection.css.map */