@charset "utf-8";
/*--------------------------------------------------------------------------------

  intro

--------------------------------------------------------------------------------*/
.intro {
  text-align: center;
  container-type: inline-size;
}
.intro_lead {
  text-align: center;
  font-family: var(--ff-go);
  font-weight: 700;
    font-size: min(7cqw, var(--fs-3l));
  color: var(--color-primary);
  line-height: var(--line-height-m);
  padding-bottom: var(--space-m);
}
.intro_txt {
  display: inline-block;
  margin-inline: auto;
  text-align: left;
}

/*--------------------------------------------------------------------------------

  about

--------------------------------------------------------------------------------*/
.about {
  margin-top: var(--space-2l);
  padding: var(--space-2l) 0;
  background: var(--color-primary-light);
  background: linear-gradient(125deg,rgba(var(--rgb-color-primary-light) / 1) 20%, rgba(var(--rgb-color-secondary-lighter) / 1) 60%);
}

/*--------------------------------------------------------------------------------
  .about-case
--------------------------------------------------------------------------------*/
.about-case-hd {
  text-align: center;
  font-family: var(--ff-go);
  font-weight: 700;
  color: #FFF;
  font-size: var(--fs-2l);
  line-height: var(--line-height-m);
  display: flex;
  column-gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  margin-bottom: var(--space-l);
}
.about-case-hd_highlight {
  font-size: var(--fs-l);
}
.about-case {
  max-width: 840px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, auto);
  container-type: inline-size;
}
.about-case_img {
  grid-area: 2 / 3 / 6 / 5;
  justify-self: center;
  align-self: end;
}
.about-case_list {
  grid-area: 1 / 1 / 5 / 7;
  align-self: start;
  position: relative;
  z-index: 1;
}

/* .about-case_img
----------------------------------------*/
@media not (max-width: 760px) { .about-case_img { --break-point: 1000; } }
@media (max-width: 760px) { .about-case_img { --break-point: 640; } }
.about-case_img {
  width: min(calc(340 / var(--break-point) * 100vw), 340px);
}

/* .about-case_list
----------------------------------------*/
.about-case_list {
  text-align: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3cqi 6cqw;
  container-type: inline-size;
}
.about-case_list-item {
  color: var(--color-primary);
  font-size: min(3.5cqw, 1rem);
  font-family: var(--ff-go);
  font-weight: 500;
  display: grid;
  place-content: center;
  place-items: center;
  background-color: #FFF;
  border-radius: 0.4rem;
  line-height: var(--line-height-s);
  position: relative;
}
.about-case_list-item:nth-child(odd) { border-bottom-right-radius: 0; }
.about-case_list-item:nth-child(even) { border-bottom-left-radius: 0; }
.about-case_list-item:after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  border-style: solid;
  border-color: #FFF transparent transparent;
}
.about-case_list-item:nth-child(odd):after { right: 0; border-width: 1rem 0 0 1rem; }
.about-case_list-item:nth-child(even):after { left: 0; border-width: 1rem 1rem 0 0; }
.about-case_list-txt {
  padding: 1.25em;
}
@media not (max-width: 760px) {
  .about-case_list-item:nth-child(1) { margin-left: 10cqw; }
  .about-case_list-item:nth-child(2) { margin-right: 10cqw; }
  .about-case_list-item:nth-child(3) { margin-right: 8cqw; }
  .about-case_list-item:nth-child(4) { margin-left: 8cqw; }
}
@media (max-width: 760px) {
  .about-case_list-item:nth-child(3) { margin-right: 10cqw; }
  .about-case_list-item:nth-child(4) { margin-left: 10cqw; }
}

/*--------------------------------------------------------------------------------
  .about-service
--------------------------------------------------------------------------------*/
.about-service-hd {
  border-radius: 0.6rem 0.6rem 0 0;
  background-color: var(--color-primary);
  text-align: center;
  font-family: var(--ff-go);
  font-weight: 600;
  color: #FFF;
  font-size: var(--fs-l);
  line-height: var(--line-height-s);
  padding: 1rem 1.5rem;
}
.about-service {
  border-radius: 0 0 0.6rem 0.6rem;
  background-color: #FFF;
  display: grid;
}
.about-service_area-img { text-align: center; }
@media not (max-width: 760px) {
  .about-service {
    grid-template-columns: 1fr 1.5fr;
    column-gap: var(--space-l);
    padding: 0 var(--inner-space-m);
  }
  .about-service_area-img { order: 1; align-self: end; }
  .about-service_area-txt { order: 2; padding: var(--inner-space-m) 0; }
}
@media(max-width: 760px) {
  .about-service_area-txt {
    padding: var(--inner-space-m) var(--inner-space-m) 0 var(--inner-space-m);
  }
  .about-service_area-img { padding-top: var(--space-m); }
}

/* .about-service_img
----------------------------------------*/
@media not (max-width: 760px) {
  .about-service_img {
    width: min(calc(360 / 1000 * 100vw), 360px);
  }
}
@media (max-width: 760px) {
  .about-service_img {
    width: min(70%, 440px);
  }
}

/* .about-service_txt
----------------------------------------*/
.about-service_list-ttl {
  font-family: var(--ff-go);
  font-weight: 600;
  color: var(--color-primary);
  font-size: var(--fs-2m);
}
.about-service_list {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  line-height: var(--line-height-s);
  margin: 1em 0;
  font-family: var(--ff-go);
  font-size: var(--fs-m);
  font-weight: 500;
}
.about-service_list_item {
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
}
.about-service_list_item:before {
  flex-shrink: 0;
  align-self: start;
  content: "";
  width: 1.3em;
  height: 1.3em;
  margin-top: 0.1em;
  background: var(--icon-check) no-repeat center center;
  background-size: contain;
}

/*--------------------------------------------------------------------------------

  faq

--------------------------------------------------------------------------------*/
.faq {
  padding: var(--space-2l) 0;
}

/*--------------------------------------------------------------------------------

  flow

--------------------------------------------------------------------------------*/
.flow {
  background-color: var(--bg-primary);
}
.flow_container { display: grid; }
.flow_area-img { margin-top: var(--space-l); }
@media not (max-width: 760px) {
  .flow {
    padding: var(--space-2l) 0;
  }
  .flow_container {
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: repeat(2, auto);
    grid-template-areas: 
      "flow-hd flow-content"
      "flow-img flow-content";
  }
  .flow_hd { grid-area: flow-hd; }
  .flow_content { grid-area: flow-content; align-self: center; }
  .flow_area-img { grid-area: flow-img; align-self: end; }
}
@media (max-width: 760px) {
  .flow {
    padding: var(--space-2l) 0 var(--space-l) 0;
  }
  .flow_hd { margin-bottom: var(--space-m); }
  .flow_area-img { text-align: center; }
}

/*--------------------------------------------------------------------------------
  .flow_img
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) {
  .flow_img {
    width: min(calc(380 / 1400 * 100vw), 380px);
  }
}
@media (max-width: 760px) {
  .flow_img {
    width: min(80%, 480px);
  }
}

/*--------------------------------------------------------------------------------

  contact

--------------------------------------------------------------------------------*/
.contact {
  padding-top: var(--space-2l);
}
.contact-hd {
  margin-bottom: var(--space-l);
}
@media (max-width: 760px) {
  .contact-hd { margin-top: -1rem; }
}
.contact-hd_ttl {
  text-align: center;
  font-size: var(--fs-3l);
  line-height: var(--line-height-m);
  margin-bottom: var(--space-l);
}
.contact-hd_ttl-txt {
  font-family: var(--ff-go);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1em;
}
.contact-hd_ttl-arrow {
  --width: 2.2em;
  --height: 1em;
  --end-top: 0.4em;
  display: block;
  position: relative;
  margin-inline: auto;
  width: var(--width);
  height: calc(var(--height) + var(--end-top));
}
.contact-hd_ttl-arrow:before,
.contact-hd_ttl-arrow:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  width: var(--width);
  height: var(--height);
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.contact-hd_ttl-arrow:before {
  top: 0;
  background: rgba(var(--rgb-color-primary-lighter) / 1);
  background: linear-gradient(0deg,rgba(var(--rgb-color-primary-lighter) / 1) 0%, rgba(var(--rgb-color-secondary-lightest) / 1) 100%);
}
.contact-hd_ttl-arrow:after {
  top: var(--end-top);
  background: rgba(var(--rgb-color-primary-lighter) / 0.5);
  background: linear-gradient(0deg,rgba(var(--rgb-color-primary-lighter) / 0.5) 0%, rgba(var(--rgb-color-secondary-lightest) / 0.5) 100%);
  z-index: -1;
  animation: contact-arrow 1.6s infinite var(--cubic-bezier);
  opacity: 0;
}
.contact-hd_lead {
  font-family: var(--ff-go);
  font-weight: 600;
  font-size: var(--fs-2m);
  line-height: var(--line-height-m);
  margin-bottom: 1em;
}
@keyframes contact-arrow {
  0% { transform: translateY(-25%); opacity: 1; }
  25% { opacity: 0.5; }
  100% { transform: translateY(25%); opacity: 0; }
}