@charset "utf-8";

/* img {
  contain: size;
} */

.sec-steps .sec-ttl {
  border-bottom: 1px solid var(--clr-border-500);
}

.sec-steps .usage-steps {
  display: grid;
  justify-content: center;
  min-height: max-content;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, 13rem);
  gap: var(--space-10);
}

.sec-steps .usage-steps li:nth-of-type(odd) {
  background-color: var(--clr-background);
}

.sec-steps .usage-steps li:nth-of-type(even) {
  background-color: var(--clr-secondary);
}

.sec-steps .usage-steps li {
  padding: var(--space-10);
  border-radius: 20px;
  color: var(--clr-neutral-100);
}

.sec-steps .usage-steps-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: var(--space-20);
  font-weight: 400;
  letter-spacing: -0.25rem;
}

.sec-steps .usage-number {
  display: inline-block;
  position: relative;
}

.sec-steps .usage-number::after {
  position: absolute;
  top: 50%;
  margin-left: .8125rem;
  transform: translateY(-50%);
  content: "";
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid var(--clr-neutral-100);
}

.sec-steps .step-lists {
  margin-top: var(--space-40);
}

.sec-steps .step-lists li {
  display: flex;
  justify-content: space-between;
  padding: var(--space-20) var(--space-20) var(--space-20) var(--space-40);
  border-radius: 20px;
  gap: var(--space-40);
  background-color: var(--clr-neutral-100);
}

.sec-steps .step-lists li+li {
  margin-top: var(--space-30);
}

.sec-steps .step-lists li .tel {
  line-height: 1.2;
}

.sec-steps .step-lists li .tel a {
  font-size: 1.625rem;
  text-decoration: none;
}

.sec-steps .step-img img {
  border-radius: 10px;
}

.sec-steps .step-lists li:first-child .step-img {
  border-radius: 10px;
  background-color: var(--clr-light-background);
}

.sec-steps .step-lists-txt {
  width: 55%;
}

.sec-steps .step-img .step-info-wrap {
  padding: var(--space-30) var(--space-60);
}

.sec-steps .step-info-wrap .btn-contact {
  padding: .8125rem 1.375rem;
  border-radius: 10px;
}

/* faq */
.faq-content .faq-item {
  padding: var(--space-20) var(--space-20) 0 var(--space-20);
  border-radius: 10px;
  background-color: var(--clr-neutral-100);
}

.faq-content .faq-item+.faq-item {
  margin-top: 0.625rem;
}

.faq-content .faq-list {
  padding-bottom: var(--space-80);
}

.faq-content .faq-list .btn-faq {
  display: flex;
  align-items: start;
  position: relative;
  width: 100%;
  padding-bottom: var(--space-20);
  border: none;
  color: var(--clr-neutral-900);
  gap: 0.5625rem;
  appearance: none;
  background-color: var(--clr-neutral-100);
  padding-inline: 0;
}

.faq-content .faq-list .btn-faq .q {
  margin-right: var(--space-10);
}

.faq-content .faq-list .btn-faq span:nth-of-type(2) {
  line-height: 1.5;
}

.faq-content .faq-list .faq-answer {
  padding-block: var(--space-30);
  border-top: 1px solid var(--clr-border-500);
  background-color: var(--clr-neutral-100);
}

.faq-content .faq-q,
.faq-content .faq-a {
  color: var(--clr-background);
  font-family: var(--font-tertiary);
}

.faq-answer-inner .faq-a {
  line-height: 2;
}

.faq-content .faq-list .faq-answer-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.faq-content .faq-question {
  display: inline-block;
  width: 100%;
}

.faq-content .faq-question .plus-icon {
  display: block;
  position: relative;
  width: 15px;
  height: 15px;
  margin-left: auto;
  align-self: center;
}

.faq-content .faq-question .plus-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.0938rem;
  background-color: #000; /* change color if you want */
  transform: translateY(-50%);
  /* transition: background-color .3s; */
}

.faq-content .faq-question .plus-icon::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.0938rem;
  height: 100%;
  background-color: #000;
  transform: translateX(-50%);
}

@media (hover: hover) and (pointer: fine) {
  .faq-content .faq-question:hover .plus-icon::before,
  .faq-content .faq-question:hover .plus-icon::after {
    background-color: var(--clr-primary);
  }
}


.btn-faq[aria-expanded='true'] .plus-icon::before,
.btn-faq[aria-expanded='true'] .plus-icon::after {
  transform: rotate(180deg);
}

.btn-faq[aria-expanded='true'] .plus-icon::before {
  opacity: 0;
  transition: opacity 0.2s 0.2s, transform 0.4s;
}

@media (max-width: 48em) {
  img {
    contain: none;
  }

  .sec-usage-ttl .sec-ttl {
    width: 18.125rem;
  }

  .sec-steps .usage-steps {
    display: block;
  }

  .sec-steps .usage-steps li {
    display: flex;
    align-items: center;
    line-height: 1.6;
    padding: .4375rem var(--space-20);
    gap: var(--space-10);
  }

  .sec-steps .usage-steps li+li {
    margin-top: var(--space-5);
  }

  .sec-steps .usage-steps li:last-child {
    gap: var(--space-30);
  }

  .sec-steps .usage-steps li:last-child img {
    width: 4.75rem;
  }

  .sec-steps .step-lists li {
    align-items: center;
    flex-direction: column;
    padding: var(--space-40) var(--space-20) var(--space-20) var(--space-20);
    gap: var(--space-20);
  }

  .sec-steps .step-img .step-info-wrap {
    padding: var(--space-30) var(--space-20);
  }

  .sec-steps .step-lists-txt {
    width: 100%;
  }

  .sec-steps .step-ttl img {
    width: 3.25rem;
  }
}