.ttl-category {
  background-image: url("../../../faq/images/faq_header.jpg"); }

.faq_list li {
  background-color: #efefef;
  padding: 1rem;
  font-weight: 600; }
  .faq_list li .question {
    background-color: #fff;
    padding: 0.75rem 1rem 0.75rem 2.5rem; }
    .faq_list li .question:before {
      background-color: #0064e6; }
    .faq_list li .question .en {
      color: #fff; }
  .faq_list li .answer {
    margin-top: 0.75rem;
    background-color: #fff;
    padding: 0.75rem 1rem 0.75rem 2.5rem; }
    .faq_list li .answer:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0; }
    .faq_list li .answer:before {
      background-color: #00a9ff; }
    .faq_list li .answer .en {
      color: #fff; }
  .faq_list li div {
    position: relative; }
    .faq_list li div:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 3rem;
      height: 100%; }
  .faq_list li .question p, .faq_list li .answer p.an {
    text-indent: -1.5rem;
    padding-left: 1.5rem; }
    .faq_list li .question p .en, .faq_list li .answer p.an .en {
      display: inline-block;
      width: 1.5rem;
      text-align: left;
      font-weight: bold;
      font-size: 1.5rem;
      position: relative;
      z-index: 2; }
  .faq_list li + li {
    margin-top: 1rem; }
  .faq_list li .btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem; }
    .faq_list li .btn a {
      background-color: #0064e6;
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 240px;
      color: #fff;
      padding: 0.25rem 2em 0.25rem 1rem;
      position: relative;
      border: 2px solid #0064e6;
      transition: color 0.4s, background 0.4s; }
      .faq_list li .btn a:before {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        right: 0.75rem;
        width: 10px;
        height: 10px;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        transform: translateY(-50%) rotate(45deg);
        transition: border 0.4s; }
      .faq_list li .btn a:hover {
        text-decoration: none;
        background-color: #fff;
        color: #0064e6; }
        .faq_list li .btn a:hover:before {
          border-color: #0064e6; }

@media screen and (max-width: 799px) {
  .faq_list li .question p, .faq_list li .answer p.an {
    text-indent: -1rem;
    padding-left: 1rem; }
    .faq_list li .question p .en, .faq_list li .answer p.an .en {
      width: 1rem;
      font-size: 1.25rem; }
  .faq_list li div:before {
    width: 2rem; }
  .faq_list li .question, .faq_list li .answer {
    padding: 0.75rem 0.75rem 0.75rem 1.5rem; } }