@charset "utf-8";

/* FAQ TOP  */
.faq-form {
    width: 28rem;
    margin: 0 auto;
}
.faq-form input[type=search] {
    width: 24rem;
}
.faq-form button[type=submit] {
    width: 3.5em;
    height: 2.25rem;
}
.parent-category-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 2.5rem;
    margin: 4.375rem auto;
    padding-bottom: 4.375rem;
    border-bottom: 1px solid #707070;
}
.faq-search .btn a {
    width: 23.125rem;
    color: #627A8B;
    background-color: #fff;
    border: 2px solid #627A8B;
}
.faq-search .btn a::after {
    background-color: #627A8B;
}
@media screen and (min-width: 768px) {
    .faq-search .btn a:hover {
        color: #fff;
        border: 2px solid #627A8B;
        background-color: #627A8B;
    }
    .faq-search .btn a:hover::after {
        background-color: #fff;
    }
}
.faq-list-area {
    max-width: 920px;
    margin: 4.375rem auto;
}
.faq-list-area .faq-item {
    border-top: 1px solid #707070;
    padding: 1.5rem 1rem;
}
.faq-cat-path .faq-cat-link-parent,
.faq-cat-path .faq-cat-link-child {
    font-weight: 700;
}
.faq-load-more-area {
    padding-top: 1rem;
    border-top: 1px solid #707070;
}
#faq-load-more {
    background-color: transparent;
}
@media screen and (max-width: 767px) {
    .faq-form {
      width: 100%;
    }
    .faq-form input[type=search] {
      width: 100%;
    }
    .faq-form button[type=submit] {
      margin: 0.8rem auto;
      display: block;
    }
    .parent-category-list {
      row-gap: 1.5rem;
    }
    .parent-category-list-item {
        width: 100%;
    }
    .faq-search .btn a {
        width: 100%;
    }
    .faq-title-link {
        display: block;
        margin-top: 1rem;
    }
    .faq-load-more-area {
        padding: 1rem;
    }
}


/* カテゴリー一覧 */
.page-faq-ttl-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 1rem;
}
.page-faq-ttl-area .faq-form {
    width: 18rem;
    margin: initial;
}
.page-faq-ttl-area .faq-form input[type=search] {
    width: 100%;
    padding-left: 2rem;
}
.page-faq-ttl-area .faq-form:before {
    position: absolute;
    content: "";
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    background: url(../img/common/search_icon.webp) no-repeat;
    background-size: contain;
    top: 0.73rem;
    left: 0.7rem;
}
.faq-archive {
    display: flex;
    column-gap: 4rem;
    row-gap: 4rem;
    flex-wrap: wrap;
    padding-bottom: 5rem;
}
.faq-child-title {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}
.faq-list {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}
.faq-child-more {
  padding-top: 1rem;
}
.faq-archive-child {
  padding-bottom: 5rem;
}
@media screen and (max-width: 767px) {
    .page-faq-ttl-area .faq-form {
      width: 100%;
      margin-top: 1rem;
    }
    .faq-child-section {
      padding-bottom: 3rem;
      border-bottom: 1px solid #707070;
    }
    .faq-child-section:last-child {
      border-bottom: none;
    }
    .faq-child-more {
       padding-top: 2rem;
    }
    .faq-archive {
      padding-bottom: 0;
    }
}
.page_mv__circle.faq-page-series {
    top: -20rem;
}


/* 記事詳細・検索一覧 */
.faq-single-main-cts,
.faq-search-main-cts {
    display: flex;
    column-gap: 3rem;
}
.single-faq-related,
.faq-search-result-cat {
    width: 18rem;
    margin: 3.78rem auto;
}
.single-faq,
.faq-search-all {
  width: 100%;
  margin-bottom: 3rem;
}
.single-faq-related-title,
.faq-search-parent-label {
    font-weight: 700;
    margin-bottom: 1rem;
}
.single-faq-related-list,
.faq-search-parent-list {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}
.single-faq-related-more {
  margin-top: 1rem;
}
.single-faq-content {
  padding-bottom: 3rem;
  border-bottom: 1px solid #707070;
}
.article-relatives {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 4%;
    padding: 1rem 0 3rem;
}
.single-faq-recent,
.faq-pick-up-area {
  width: 48%;
}
.single-faq-recent-title,
.faq-pick-up-area-ttl {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.single-faq-recent-list,
.single-faq-pick-up-list {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.single-faq-content iframe {
    margin-top: 1rem;
    aspect-ratio: 560 / 315;
}
@media screen and (min-width: 768px) {
    .page-main.single-faq .page-ttl-area {
        margin: 3rem auto;
    }
    .faq-search-all {
        margin-bottom: 6rem;
    }
    .faq-search-all .page-ttl-area {
        margin: 3rem auto 1.2rem;
    }
}
@media screen and (max-width: 767px) {
    .faq-single-main-cts,
    .faq-search-main-cts {
      flex-direction: column;
    }
    .single-faq-related-title,
    .faq-search-parent-label {
      display: flex;
      align-items: center;
      column-gap: 0.5rem;
      margin: 0;
    }
    .faq-cat-accordion {
      border-top: 1px solid #707070;
      border-bottom: 1px solid #707070;
      padding: 1rem;
    }
    .single-faq-related-title.accordion_btn .icon,
    .faq-search-parent-label.accordion_btn .icon {
      position: relative;
    }
    .single-faq-related-list,
    .faq-search-parent-list {
      margin-top: 1rem;
    }
    .page-main .page-ttl-area {
      margin: 1rem auto 2rem;
    }
    .single-faq-related,
    .faq-search-result-cat {
      width: 100%;
      margin: 2rem auto;
    }
    .article-relatives {
      flex-direction: column;
      row-gap: 3rem;
    }
    .single-faq-recent,
    .faq-pick-up-area {
      width: 100%;
    }
    .single-faq-content iframe {
      width: 100%;
      height: auto;
    }
}

/* 検索一覧 */
.faq-search-parent-link {
    text-align: left;
    background-color: transparent;
}
.faq-search-all-title {
    border-top: 1px solid #707070;
    padding-top: 2rem;
}
.faq-search-all-item-title {
  font-weight: 700;
  font-size: 1.125rem;
}
.faq-search-cat-path {
    font-size: 0.875rem;
    margin: 0.5rem auto 0.8rem;
    color: #777;
}
.faq-search-cat-path a {
    color: #777;
}
.faq-search-all-item {
  opacity: 1;
  transform: translateY(0);
  max-height: 1000px;          /* 中身が十分入るぐらいの適当な大きさ */
  padding: 2rem 0;
  overflow: hidden;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    max-height 0.5s ease,
    margin 0.5s ease,
    padding 0.5s ease;
  border-bottom: 1px solid #707070;
}
.faq-search-all-item:last-of-type {
    border-bottom: unset;
}
/* 非表示状態：ふわっと消える＆高さゼロ */
.faq-search-all-item.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
.pagination {
  margin-bottom: 1.5rem;
}
.pagination .pagination {
  margin-top: 0;
}
.pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
}
.page-ttl.faq-search-title {
  font-size: 1.8rem;
}
.faq-search-parent-link.is-current {
    background-color: #e2e2e2;
    border-radius: 5px;
    padding: 4px 5px;
    display: inline-block;
}
@media screen and (max-width: 767px) {
  .pagination {
    margin-top: 2.5rem;
  }
  .page-ttl.faq-search-title {
    font-size: 1.5rem;
  }
}