/*--------------------------------------------------------------
# ページビジュアル
--------------------------------------------------------------*/
.page_visual {
  background: url(/assets/img/faq/page_visual.jpg) no-repeat center / cover;
}
/*--------------------------------------------------------------
# サイド
--------------------------------------------------------------*/
@media (min-width: 1200px) {
  .page_faq .page_content_wrap {
    background-image: url(/assets/img/common/side_flower_left.png),url(/assets/img/common/side_flower_right.png);
    background-position: top left, top right;
    background-repeat: repeat-Y;
    background-size: 6%, 7%;
  }
}
/*--------------------------------------------------------------
# ページ内リンクリスト
--------------------------------------------------------------*/
#faq_link {
  padding-top: 0;
}
#faq_link .link_list {
  display: flex;
  justify-content: space-between;

  & li {
    width: 32%;
    position: relative;
    border-radius: 1.6rem;

    & a {
      display: block;
      color: #FFF;
      font-size: clamp( 1.4rem, calc( 1.2285714285714285rem + 0.4761904761904762vw ), 1.8rem );
      text-align: center;
      line-height: 1.5;
      word-break: keep-all;
      overflow-wrap: anywhere;
      padding: 0.5em 0.5em 1.5em;
      @media (min-width:768px) {
        padding: 1em 0.5em;
      }
      &::after {
        display: block;
        content: "";
        width: 1em;
        height: 1em;
        background-color: currentColor;
        mask: url(/assets/img/common/icon_arrow.svg) no-repeat center / contain;
        -webkit-mask: url(/assets/img/common/icon_arrow.svg) no-repeat center / contain;
        position: absolute;
        top: 80%;
        right: 47%;
        transform: rotate(90deg);
        @media (min-width:768px) {
          top: 50%;
          right: 1em;
          transform: translateY(-50%) rotate(90deg);
        }
      }
    }
    &:nth-child(1) {
      background: var(--accent-orange);
    }
    &:nth-child(2) {
      background: #44BFDE;
    }
    &:nth-child(3) {
      background: var(--accent-pink);
    }
  }
}
/*--------------------------------------------------------------
# FAQリスト
--------------------------------------------------------------*/
.faq_section {
  padding-top: 0;
}
.faq_section .faq_section_title {
  display: flex;
  font-size: clamp( 1.8rem, calc( 1.2rem + 1.6666666666666667vw ), 3.2rem );
  align-items: center;
  background-image: linear-gradient(to right, #D9D9D9, #D9D9D9 0.8rem, transparent 0.8rem,transparent 1.6rem);
  background-size: 1.6rem 0.2rem;
  background-position: left 0 top 98%;
  background-repeat: repeat-x;

  &::before {
    display: inline-block;
    content: "●";
    color: var(--key-color);
    font-size: 60%;
    margin-right: 0.5em;
  }
}
.faq_section .accordion_details {
  list-style-type: none;
  margin-top: 2.4rem;
  padding: 2em 1em;
  background: var(--pale-blue);
  border-radius: 1.6rem;
  cursor: pointer;
  @media (min-width:768px) {
    padding: 2em;
  }

  & summary {
    display: flex;
    font-weight: 700;
    font-size: clamp( 1.6rem, calc( 1.5142857142857142rem + 0.2380952380952381vw ), 1.8rem );
    line-height: 1.5;
    align-items: center;
    gap: 0 1.6rem;

    &::before {
      display: inline-flex;
      content: "Q";
      color: #FFF;
      font-weight: 500;
      font-size: clamp( 2.1rem, calc( 1.9714285714285715rem + 0.35714285714285715vw ), 2.4rem );
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      width: 2em;
      height: 2em;
      background: var(--key-color);
      border-radius: 50%;
    }
    &::after {
      display: inline-block;
      content: "＋";
      color: var(--key-color);
      margin: 0 0 0 auto;
    }
  }
  .answer_wrap {
    display: flex;
    gap: 0 1.6rem;

    &::before {
      display: inline-flex;
      content: "A";
      color: #FFF;
      font-weight: 500;
      font-size: clamp( 2.1rem, calc( 1.9714285714285715rem + 0.35714285714285715vw ), 2.4rem );
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      width: 2em;
      height: 2em;
      margin-top: 2.4rem;
      background: var(--accent-pink);
      border-radius: 50%;
    }
    .text_wrap {
      margin-top: 2.4rem;
    }
    .btn_wrap {
      margin-top: 2.4rem;
      .btn {
        min-width: auto;
        width: min(100%,30rem);
        padding: 0.5em;
      } 
    }
  }
  &[open] summary::after {
    content: "－";
  }
}

/*--------------------------------------------------------------
# 途中入園に関する質問
--------------------------------------------------------------*/
#faq_middle_entering {
  padding-bottom: 13rem;
  @media (min-width:768px) {
    padding-bottom: 18.4rem;
  }
}