/*!*************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./public/static/css/web/faq.css ***!
  \*************************************************************************************************************/
header.faq {
  --head-font-size-pc: 6.25vw;
  --head-font-color: white;
  --detail-font-size-pc: 1.25vw;
  --title-font-size-pc: 1.56vw;

  box-sizing: border-box;
  background-color: rgba(30, 158, 107, 1);
  padding: 7.7vw 12.5vw;
}
header.faq::after {
  content: " ";
  display: block;
  clear: both;
}

header.faq > h1 {
  color: var(--head-font-color);
  padding: 0;
  margin: 0;
  font-weight: 700;
  font-size: var(--head-font-size-pc);
  line-height: 1;
}
header.faq > article {
  position: relative;
  margin-top: 2.34vw;
  font-size: var(--detail-font-size-pc);
  color: var(--head-font-color);
  float: right;
  width: 60.1vw;
  font-weight: 400;
}

header.faq > article > p + p {
  margin-top: 2vw;
}

header.faq > article::before {
  top: -2vw;
  left: -14vw;
  content: " ";
  display: block;
  position: absolute;
  width: 11vw;
  height: 5vw;
  background-image: url(/static/dist/assets/smile_aa711a.svg);
  background-size: 100% 100%;
}

main.faq {
  padding: 7.6vw 0;
  --main-title-font-size: 1.98vw;
  --main-question-font-size: 1.56vw;
  --main-answer-font-size: 1.04vw;
}

main.faq > * {
  display: block;
  margin: 0 auto;
  width: 69.5vw;
}

main.faq > h2 {
  font-size: var(--main-title-font-size);
  font-weight: 600;
  text-align: center;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 4.2vw;
}

main.faq > ul {
  list-style: none;
}
/* main.faq > ul > li + li {
  margin-top: 3.125vw;
} */

main.faq > ul > li > p {
  position: relative;
  cursor: default;
}
main.faq > ul > li > p:first-of-type {
  font-size: 1.04vw;
  background-color: rgba(244, 244, 244, 1);
  padding: 24px;
  font-weight: 500;
  color: #666;
  margin-bottom: 24px;
  cursor: pointer;
}

main.faq > ul > li > p:first-of-type::after {
  top: 1vw;
  right: 2.5vw;
  content: " ";
  display: block;
  background-image: url(/static/dist/assets/smile_grey_1611d1.svg);
  background-repeat: no-repeat;
  position: absolute;
  width: 2.3vw;
  height: 2.3vw;
  background-size: 100% 100%;
}
main.faq > ul > li.active > p:first-of-type::after {
  border-top-color: rgba(153, 153, 153, 1);
  border-right-color: rgba(153, 153, 153, 1);
  background-image: url(/static/dist/assets/smile_green_d96431.svg);
}
.faq li:hover .question:after {
  background-image: url(/static/dist/assets/smile_green_d96431.svg);
}

main.faq > ul > li > p:last-of-type {
  display: none;
  margin-bottom: 24px;
  font-size: var(--main-answer-font-size);
  padding: 0 2.5vw 0 1vw;
  font-weight: 400;
  line-height: 1.5;
  color: black;
}

main.faq > ul > li.active > p:last-of-type {
  display: block;
}

/* ================== */
@media (max-width: 828px), (orientation: portrait) {
  header.faq {
    --head-font-size-pc: 11.9vw;
    --detail-font-size-pc: 3.86vw;

    padding: 20.33vw 9.1vw;
  }

  header.faq > article {
    position: relative;
    margin-top: 16.1vw;
    float: unset;
    width: auto;
    font-weight: 400;
  }

  header.faq > article > p + p {
    margin-top: 4vw;
  }

  header.faq > article::before {
    top: -11vw;
    left: 0vw;
    width: 21vw;
    height: 8vw;
  }

  main.faq {
    padding: 36px 20px;
    --main-title-font-size: 5.14vw;
    --main-question-font-size: 3.84vw;
    --main-answer-font-size: 3.84vw;
  }

  main.faq > * {
    display: block;
    margin: 0 auto;
    width: auto;
  }

  main.faq > h2 {
    font-size: var(--main-title-font-size);
    text-align: left;
    /* padding-left: 2.57vw; */
    margin-bottom: 6.31vw;
  }

  main.faq > ul > li + li {
    margin-top: 1.4vw;
  }

  main.faq > ul > li > p:first-of-type {
    font-size: var(--main-question-font-size);
    padding: 3.74vw 11.9vw 3.74vw 3.97vw;
    margin-bottom: auto;
    position: relative;
    cursor: pointer;
  }

  main.faq > ul > li > p:first-of-type::after {
    top: 3.74vw;
    right: 3.97vw;
    width: 3.5vw;
    height: 3.5vw;
  }

  main.faq > ul > li > p:last-of-type {
    display: none;
    font-size: var(--main-answer-font-size);
    padding: 0 3.97vw 0 3.97vw;
    margin-bottom: 5.37vw;
    margin-top: 5.37vw;
  }

  main.faq > ul > li.active > p:last-of-type {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  main.faq {
    padding: 36px;
  }
  main.faq > ul > li > p:first-of-type {
    font-size: 2.2vw;
    padding: 2.4vw 10vw 2.4vw 2.4vw;
    margin-bottom: auto;
    position: relative;
  }

  main.faq > ul > li > p:first-of-type::after {
    top: 2.2vw;
    right: 3.97vw;
    width: 3.5vw;
    height: 3.5vw;
  }
  main.faq > ul > li > p:last-of-type {
    font-size: 2.2vw;
    padding: 0 2.4vw;
    margin-bottom: 5.37vw;
    margin-top: 5.37vw;
  }
}