@charset "UTF-8";
@font-face {
  font-family: "Kanata-kanji";
  src: url("../font/Kanata-kanji.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
:root {
  --scale: 0.0694444444vw;
  --max: 1;
}
@media screen and (max-width: 767px) {
  :root {
    --scale: 0.2666666667vw;
    --max: 10;
  }
}

/* ===============================
  よくある質問（FAQ）
=============================== */
.faq::before {
  z-index: 8;
}
@media (min-width: 768px) {
  .faq::after {
    aspect-ratio: 1440/580;
  }
}

.faq__header {
  margin-top: min(calc(16 * var(--scale)), calc(16px * var(--max)));
}

.faq__title {
  font-size: min(calc(45 * var(--scale)), calc(45px * var(--max)));
  font-weight: 700;
  color: #00685f;
  text-align: center;
  padding-bottom: 0.4em;
  position: relative;
}
.faq__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #5aaf7e;
  border-radius: min(calc(50 * var(--scale)), calc(50px * var(--max)));
  width: 2.1em;
  height: 0.1em;
}
@media (max-width: 767px) {
  .faq__title {
    font-size: min(calc(30 * var(--scale)), calc(30px * var(--max)));
  }
}

.faq__lead {
  margin-top: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  font-size: min(calc(26 * var(--scale)), calc(26px * var(--max)));
  font-weight: 700;
  color: #00685f;
  text-align: center;
}
@media (max-width: 767px) {
  .faq__lead {
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  }
}

.faq__nav {
  margin-top: min(calc(17 * var(--scale)), calc(17px * var(--max)));
}

.faq__category {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(calc(22 * var(--scale)), calc(22px * var(--max)));
  width: min(calc(1120 * var(--scale)), calc(1120px * var(--max)));
}
.faq__category li a {
  letter-spacing: -0.05em;
  display: inline-block;
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 700;
  border: 2px solid #cce2c2;
  border-radius: min(calc(50 * var(--scale)), calc(50px * var(--max)));
  padding: 0.4em 2em;
  background: #fff;
}
@media (max-width: 767px) {
  .faq__category {
    gap: min(calc(15 * var(--scale)), calc(15px * var(--max)));
    width: 100%;
  }
  .faq__category li a {
    font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
    padding: 0.4em 1em;
  }
}

/*------------------------------
faq__body
------------------------------*/
.faq__body {
  margin-top: min(calc(90 * var(--scale)), calc(90px * var(--max)));
  padding-top: min(calc(50 * var(--scale)), calc(50px * var(--max)));
  position: relative;
}
@media (max-width: 767px) {
  .faq__body {
    margin-top: min(calc(70 * var(--scale)), calc(70px * var(--max)));
  }
}

.faq__groups {
  width: calc(820 / 1120 * 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: min(calc(70 * var(--scale)), calc(70px * var(--max))) 0;
}
.faq__groups:nth-child(n+2) {
  margin-top: 6.65%;
}
@media (max-width: 767px) {
  .faq__groups {
    width: 100%;
  }
}

.faq__group-heading {
  background: #cce2c2;
  font-size: min(calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 700;
  color: #00685f;
  padding: 0.5em 2.5em;
}
@media (max-width: 767px) {
  .faq__group-heading {
    font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
    padding: 0.5em 1.5em;
  }
}

.faq__list {
  width: calc(690 / 820 * 100%);
  margin: 0 auto;
  margin-top: min(calc(24 * var(--scale)), calc(24px * var(--max)));
  display: flex;
  flex-direction: column;
  gap: min(calc(24 * var(--scale)), calc(24px * var(--max))) 0;
}
@media (max-width: 767px) {
  .faq__list {
    width: 100%;
  }
}

.faq__item {
  display: flex;
  flex-direction: column;
  gap: min(calc(10 * var(--scale)), calc(10px * var(--max))) 0;
}

.faq__question {
  background: #fff;
  border-radius: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  filter: drop-shadow(2px 4px 12px rgba(217, 217, 217, 0.3));
  font-family: "TsukuARdGothicStd-R";
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 400;
  padding: 1em 4.4em;
  position: relative;
}
.faq__question::before {
  content: "Q";
  position: absolute;
  top: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  left: min(calc(30 * var(--scale)), calc(30px * var(--max)));
  font-size: min(calc(30 * var(--scale)), calc(30px * var(--max)));
  line-height: 1;
  font-weight: 400;
  font-family: "Kanata-kanji", sans-serif;
  color: #00685f;
}
@media (max-width: 767px) {
  .faq__question {
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    padding: 1em 3em 1em 3em;
  }
  .faq__question::before {
    left: min(calc(15 * var(--scale)), calc(15px * var(--max)));
    top: 27%;
    font-size: min(calc(24 * var(--scale)), calc(24px * var(--max)));
  }
}

.faq__answer {
  background: #fff;
  border-radius: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  font-family: "TsukuARdGothicStd-R";
  padding: 1.75em 2.5em 1.75em 4.8em;
  filter: drop-shadow(2px 4px 12px rgba(217, 217, 217, 0.3));
  position: relative;
  margin-top: 3%;
}
.faq__answer strong {
  font-family: "TsukuARdGothicStd-B";
}
.faq__answer p {
  position: relative;
}
.faq__answer p::before {
  content: "A";
  position: absolute;
  top: 0;
  left: -1.5em;
  font-size: min(calc(30 * var(--scale)), calc(30px * var(--max)));
  line-height: 1;
  font-weight: 400;
  font-family: "Kanata-kanji", sans-serif;
  color: #dba326;
}
.faq__answer a {
  color: #00685f;
  text-decoration: underline;
}
@media (max-width: 767px) {
  .faq__answer {
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    padding: 1em 1em 1em 3em;
  }
  .faq__answer p::before {
    left: -11%;
    font-size: min(calc(24 * var(--scale)), calc(24px * var(--max)));
  }
  .faq__answer span::before {
    left: -1.1em;
  }
}

.faq__arrow-link {
  position: relative;
  padding-left: 1em;
}
.faq__arrow-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
          clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background: #00685f;
  width: 0.9em;
  aspect-ratio: 15/18;
}

/*------------------------------
support
------------------------------*/
.support {
  padding: min(calc(80 * var(--scale)), calc(80px * var(--max))) 0 min(calc(193 * var(--scale)), calc(193px * var(--max)));
}
@media (max-width: 767px) {
  .support {
    padding: min(calc(40 * var(--scale)), calc(40px * var(--max))) 0 min(calc(140 * var(--scale)), calc(140px * var(--max)));
  }
}

.support__list {
  width: calc(840 / 1120 * 100%);
  margin: 0 auto;
  background: #fff;
  border-radius: min(calc(17 * var(--scale)), calc(17px * var(--max)));
  padding: min(calc(25 * var(--scale)), calc(25px * var(--max))) 5.2%;
  padding-right: 3%;
}
@media (max-width: 767px) {
  .support__list {
    width: 100%;
    padding: min(calc(25 * var(--scale)), calc(25px * var(--max))) 3% min(calc(25 * var(--scale)), calc(25px * var(--max))) 6%;
  }
}

.support__item {
  padding: min(calc(25 * var(--scale)), calc(25px * var(--max))) 0;
  border-bottom: 1px solid #d9d9d9;
}
.support__item:last-child {
  border: none;
}

.support__text {
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 700;
  color: #dba326;
  letter-spacing: -0.05em;
}
@media (max-width: 767px) {
  .support__text {
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  }
}

.support__link {
  margin-top: 1.4%;
}
.support__link a {
  display: inline-block;
  font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 700;
  text-decoration: underline;
  position: relative;
  padding-left: 1.3em;
}
.support__link a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.9em;
  aspect-ratio: 15/17;
  background: url(../img/common/icon-arrow.svg) no-repeat center center/100%;
}
@media (max-width: 767px) {
  .support__link a {
    font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}
/*# sourceMappingURL=faq.css.map */