@charset "UTF-8";
/*=================================================================================

　変数定義

=================================================================================*/
/*—————————————————————————————————————————————————————
　横幅／高さ／余白設定
—————————————————————————————————————————————————————*/
/*—————————————————————————————————————————————————————
　カラー設定
—————————————————————————————————————————————————————*/
button {
  margin: 0;
  padding: 0;
  border: none;
  display: block; /* 変なマージン無くす用 */
  cursor: pointer;
  background-color: unset;
}

a:hover {
  opacity: 1;
  background-color: unset;
}

@media screen and (max-width: 1024px) {
  .l-header {
    display: none;
  }
}
.l-header .l-header__logo {
  margin-left: 40px;
  margin-top: 40px;
  position: fixed;
}

main {
  background-image: url(../img/feature_bg_sp04.png);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 240px;
}
@media screen and (max-width: 480px) {
  main {
    padding-bottom: 0;
  }
}
main section {
  width: 100%;
  max-width: 750px;
  margin-inline: auto;
  background-color: #fff;
}
main #sec_about .view_more {
  position: relative;
  padding-bottom: 120px;
  /* 本文を隠す高さを指定 */
}
main #sec_about .view_more .gradation {
  position: relative;
  height: 240px;
  overflow: hidden;
  -webkit-transition: height 1s ease;
  transition: height 1s ease;
  /* 透過グラデーションをposition指定 */
  /* もっと見るボタンで透過グラデーションを解除 */
}
main #sec_about .view_more .gradation.active {
  height: 1000px;
}
main #sec_about .view_more .gradation::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(90%, #fff));
  background: linear-gradient(rgba(255, 255, 255, 0) 0, #fff 90%);
  position: absolute;
  top: 0;
  left: 0;
}
main #sec_about .view_more .gradation.active::before {
  background: none;
}
main #sec_about .view_more .view_more_btn {
  width: 100%;
  max-width: 240px;
  padding: 12px 24px;
  border: 1px solid #333;
  font-size: 16px;
  font-weight: 400;
  position: absolute;
  top: 70%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: height 1s ease;
  transition: height 1s ease;
}
@media screen and (max-width: 480px) {
  main #sec_about .view_more .view_more_btn {
    top: 80%;
  }
}
main #sec_about .view_more .gradation.active + .view_more_btn {
  top: 95%;
}
@media screen and (max-width: 480px) {
  main #sec_about .view_more .gradation.active + .view_more_btn {
    top: 90%;
  }
}
main #sec_qa {
  margin-bottom: 80px;
}
@media screen and (max-width: 480px) {
  main #sec_qa {
    margin-bottom: 40px;
  }
}
main #sec_qa .qa_wap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
main #sec_qa .qa_wap .qa_button {
  position: relative;
  border-bottom: solid 1px #ccc3bd; /* 表示時のボーダー */
}
main #sec_qa .qa_wap .qa_button .qa_plus {
  display: inline-block;
  vertical-align: middle;
  color: #b7aba3;
  line-height: 1;
  width: 2em;
  height: 0.15em;
  background: currentColor;
  border-radius: 0.1em;
  position: absolute;
  right: 5%;
  top: 50%;
}
main #sec_qa .qa_wap .qa_button .qa_plus::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}
main #sec_qa .qa_wap .qa_text {
  height: 0; /* 初期状態の高さを0に設定 */
  overflow: hidden; /* 高さを超える内容を隠す */
  -webkit-transition: height 0.4s ease;
  transition: height 0.4s ease; /* 高さのアニメーションを設定 */
}
main #sec_qa .qa_wap .qa_button.is_open {
  border-bottom: 0; /* 表示時のボーダー */
}
main #sec_qa .qa_wap .qa_button.is_open .qa_plus::before {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}