@charset "utf-8";
/* 記事アコーディオン */
.readmore {
    position: relative;
    margin: 3em auto;
    display: block;
    color: white;
    border: none;
    outline: 0;
    cursor: pointer;
    background: none;
    letter-spacing: 0.1em;
}
.readmore:before {
  content: "";
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50%;
  display: block;
  margin: 0 auto .5em;
  background: url(../../img/deep/arrow.png) no-repeat center / 20px #fff;
  transition: .3s;
}
.readmore.on-click:before {
  transform: rotate(180deg);
}
.readmore .open {
  display: block;
  font-size: 1.4rem;
}
.readmore.on-click .open {
  display: none;
  font-size: 1.4rem;
}
.readmore .close {
  display: none;
  font-size: 1.4rem;
}
.readmore.on-click .close {
  display: block;
  font-size: 1.4rem;
}
/* よくある質問 */
.faq-item {
    width: 65vw;
    margin-top: 20px;
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    /* margin: 0 auto;  */
    border: 1px solid rgb(6, 77, 170);
    font-family: "M PLUS 1p", sans-serif;
  }
  .faq-question__wrap {
    position: relative;
    background: rgb(227, 234, 243);
    padding: 4% 10%;
    cursor: pointer;
  }
  .minus-icon {
    position: absolute;
    content: "";
    width: 3%;
    height: 3%;
    background: rgb(6, 77, 170);
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
  }
  .plus-icon {
    position: absolute;
    content: "";
    width: 3%;
    height: 3%;
    background: rgb(6, 77, 170);
    right: 3%;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: ease all 0.5s; /* 擬似要素のトランジションを追加 */
  }
  .plus-icon.active {
    transform: translateY(-50%);
  }
  .faq-question__title {
    font-weight: 500;
    color: rgb(6, 77, 170);
    font-size: 1.4rem;
    text-align: left;
    font-family: "M PLUS 1p", sans-serif;
    position: relative;
  }
  .faq-question__title::before {
    position: absolute;
    color: rgb(6, 77, 170);
    content: "Q";
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
  }
  .faq-answer__wrap {
    background: #fff;
    padding: 4% 10%;
    transition: ease all 0.5s; /* 擬似要素のトランジションを追加 */
    height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
  }
  .faq-answer__wrap.active {
    height: auto;
    padding: 4% 10%;
  }
  .faq-answer__wrap {
    background: #fff;
    opacity: 0;
    padding: 4% 10%;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: ease all 0.7s; /* 擬似要素のトランジションを追加 */
  }
  .faq-answer__wrap.active {
    opacity: 1;
    padding: 4% 10%;
  }
  .faq-answer__title {
    position: relative;
    font-weight: 500;
    font-family: "M PLUS 1p", sans-serif;
    color: rgb(6, 77, 170);
    font-size: 1.4rem;
    text-align: left;
  }
  .faq-answer__title::before {
    position: absolute;
    color: rgb(6, 77, 170);
    content: "A";
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
  }
  .faq-answer__text {
    margin-top: 5%;
    font-size: 1.4rem;
    text-align: left;
    font-family: "M PLUS 1p", sans-serif;
  }
   /* SP */
   @media screen and (max-width:768px) {
    .readmore .open {
      font-size: 0.8rem;
    }
    .faq-item {
      width: 75vw;
    }
    .faq-question__title::before {
      left: -20px;
    }
    .faq-answer__title::before {
      left: -20px;
    }
    .faq-question__title, .faq-answer__title, .faq-answer__text {
      font-size: 0.8rem;
    }
   }