html {
  font-size: 62.5%;
}

.faq-content{
  padding-top: 4.6rem;
  padding-bottom: 8rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #63b0ef;
}

.faq-content .content_ttl{
  width: 11.4rem;
  margin: 0 auto;
  margin-bottom: 0.6rem;
}

.faq-content .content_sub_ttl{
  margin-bottom: 2.2rem;
  position: relative;/*+マークの位置基準とするためrelative指定*/
  font-family: var(--font-jp);
  font-weight: 700;
  color: #ffe400;
  font-size: 2.3rem;
  line-height: 1.58333;
  letter-spacing: 0.12em;
  text-align: center;
  font-feature-settings: "palt";
}

/*==================================================
アコーディオンのためのcss
===================================*/

/*アコーディオン全体*/
.faq-area{
  list-style: none;
  width: 31.4rem;
  margin:0 auto;
}

.faq-area li {
  padding-bottom: 1.8rem;
}

.faq-area section {
border-radius: 100vw;
}

/*アコーディオンタイトル*/
span.question-mark {
  display: inline-block;
  width: 2.8rem;
}

span.answer-mark {
  display: inline-block;
  width: 2.8rem;
  min-width: 2.8rem;

}

.title {
  display: grid;
  position: relative;
  grid-template-columns: 2.8rem auto;
  position: relative;/*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-family: var(--font-jp);
  font-weight: 700;
  color: #000;
  font-size: 1.8rem;
  line-height: 1.583333333;
  letter-spacing: 0.08em;
  text-align: justify;
  font-feature-settings: "palt";
  padding: 1.8rem 3.7rem 1.6rem 1.8rem;
  gap: 0.8rem;
  transition: all .5s ease;
  background: #FFF;
  border-radius: 1rem;
}

.title span{
  font-weight: 700;
}

/*アイコンの＋と×*/
.title::after{
  position: absolute;
  content:'';
  width: 1.8rem;
  height: 100%;
}

.title::after{
  top: 2rem;
  right: 1.4rem;
  background-image: url(../../../brand/Page/img/faq/close.svg);
  background-repeat: no-repeat;
}

/*　closeというクラスがついたら形状変化　*/

.title.close::after{
background-image: url(../../../brand/Page/img/faq/open.svg);
width: 2.4rem;
top: 2.6rem;
right: 1.4rem;
}

.title.close{
  border-radius: 1rem 1rem 0 0;
}

/*アコーディオンで現れるエリア*/
.box {
  display: none;/*はじめは非表示*/
  background: #ffe400;
  padding: 1.8rem 2.8rem 1.6rem 1.8rem;;
  border-radius: 0 0 1rem 1rem;
}

.box p{
  display: flex;
  gap: 0.8rem;
  font-family: var(--font-jp);
  font-weight: 700;
  color: #000;
  font-size: 1.8rem;
  line-height: 1.58333;
  letter-spacing: 0.08em;
  text-align: justify;
  font-feature-settings: "palt";
  color: #ff0000;
}

.box p span{
  font-weight: 700;
}

  /* ====== TABLET ===== */
  @media screen and (max-width: 1280px) and (min-width:768px){
    html{
      font-size: calc(10*(100vw/1280));
    }

  }

    /* ====== SP ===== */
    @media only screen and (max-width: 767px) {
      .faq-content{
        padding-top: calc(90* (100vw / 750));
        padding-bottom: calc(150* (100vw / 750));
      }

      .faq-content .content_ttl{
        width: calc(230* (100vw / 750));
        margin-bottom: calc(14* (100vw / 750));
      }

      .faq-content .content_sub_ttl{
        margin-bottom: calc(42* (100vw / 750));
        font-size: calc(46* (100vw / 750));
      }

      /*==================================================
      アコーディオンのためのcss
      ===================================*/

      /*アコーディオン全体*/
      .faq-area{
        width: calc(630* (100vw / 750));
      }

      .faq-area li {
        padding-bottom: calc(38* (100vw / 750));
      }

      /*アコーディオンタイトル*/
      span.question-mark {
        width: calc(56* (100vw / 750));
      }

      span.answer-mark {
        display: inline-block;
        width: calc(56* (100vw / 750));
      }

      .title {
        font-size: calc(36* (100vw / 750));
        padding: calc(36* (100vw / 750)) calc(90* (100vw / 750 )) calc(30* (100vw / 750)) calc(36* (100vw / 750));
        gap: calc(16* (100vw / 750));
        border-radius: calc(24* (100vw / 750));
      }

      /*アイコンの＋と×*/
      .title::after{
        width: calc(38* (100vw / 750));
      }

      .title::after{
        top: calc(42* (100vw / 750));
        right: calc(26* (100vw / 750));
      }

      /*　closeというクラスがついたら形状変化　*/

      .title.close::after{
        width: calc(46* (100vw / 750));
        top: calc(48* (100vw / 750));
        right: calc(28* (100vw / 750));
      }

      .title.close{
        border-radius: calc(20* (100vw / 750)) calc(20* (100vw / 750)) 0 0;
      }

      /*アコーディオンで現れるエリア*/
      .box {
        padding: calc(34* (100vw / 750)) calc(56* (100vw / 750)) calc(40* (100vw / 750)) calc(40* (100vw / 750));
        border-radius: 0 0 calc(24* (100vw / 750)) calc(24* (100vw / 750));
      }

      .box p{
        display: grid;
        grid-template-columns: calc(56* (100vw / 750 )) auto;
        gap: calc(18* (100vw / 750));
        font-size: calc(36* (100vw / 750));
      }
    }