@charset "utf-8";

.faq{
   max-width: 850px;
}
/*=================================================================
   カテゴリー一覧
=================================================================*/
.faq-group {
   padding: 36px 40px;
   background-color: var(--color-lightblue);
   border-radius: 16px;
}
.faq-group__title {
   text-align: center;
   font-weight: 700;
   font-size: 2.2rem;
   margin: 0 0 1em;
}
.faq-group__list {
   display: flex;
   flex-wrap: wrap;
   gap: 70px;
   width: 100%;
   list-style: none;
   margin: 0;
   padding: 0;
}
.faq-group__item {
   list-style: none;
}
.faq-group__link {
   color: var(--color-base);
   font-size: 1.6rem;
   text-decoration: none;
   position: relative;
   padding-left: 20px;
   display: inline-block;
}
.faq-group__link::before {
   position: absolute;
   top: 50%;
   left: 0;
   translate: 0 -50%;
   content: "";
   width: 0;
   height: 0;
   border-style: solid;
   border-right: 7px solid transparent;
   border-left: 7px solid transparent;
   border-top: 11px solid var(--color-blue);
   border-bottom: 0;
}
@media screen and (max-width: 767px) {
   .faq{
      padding: 0 20px;
   }
   .faq-group {
      padding: 20px;
      border-radius: 10px;
   }
   .faq-group__title {
      font-size: 1.5rem;
   }
   .faq-group__list {
      flex-direction: column;
      gap: 6px;
   }
   .faq-group__link {
      display: block;
      font-size: 1.3rem;
      padding: .8em .8em .8em 2.5em;
      border-radius: 4px;
      background: #fff;
   }
   .faq-group__link::before{
      left: .8em;
      border-right-width: 6px;
      border-left-width: 6px;
      border-top-width: 9px;
   }
}

/*=================================================================
   FAQ一覧
=================================================================*/
.faq__conts__ttl {
   position: relative;
   font-size: 2.6rem;
   padding-block: 14px 12px;
   padding-left: 24px;
   margin: 2em 0 1em;
}
.faq__conts__ttl::before {
   position: absolute;
   content: "";
   top: 0;
   left: 0;
   width: 4px;
   height: 100%;
   background-color: var(--color-blue);
   border-radius: 2px;
}
.faq__list{
   margin-bottom: 3rem;
}
.faq__item.js-toggle {
   overflow: hidden;
}



/* アコーディオンデザイン
-------------------------------------*/
.faq__list {
   overflow: hidden;
   border-radius: 10px;
   border: 1px solid #ddd;
}
.faq__item+.faq__item{
   border-top: 1px solid #ddd;
}
.faq__list.faq__list--count {
   counter-reset: faq-counter;
}
/* 質問
-------------------------------------*/
.faq__item-question {
   position: relative;
   cursor: pointer;
   font-size: 1.7rem;
   font-weight: 500;
   display: flex;
   align-items: stretch;
   justify-content: space-between;
   width: 100%;
   padding: 1.5em 4em 1.5em 90px;
}
.faq__item-question::before {
   position: absolute;
   left: 0;
   top: 0;
   width: 65px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.2rem;
   color: #fff;
   content: "Q";
   background: var(--color-blue);
}
.faq__item-question.faq__item-question--count::before {
   counter-increment: faq-counter;
  content: counter(faq-counter) "";
}
.faq__item-question .icon{
   position: absolute;
   right: 0;
   top: 0;
   display: block;
   width: 4em;
   height: 100%;
}
.faq__item-question .icon::before,
.faq__item-question .icon::after {
   position: absolute;
   content: "";
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 1em;
   height: 3px;
   margin: auto;
   background-color: var(--color-blue);
   border-radius: 10px;
}
.faq__item-question .icon::after {
   transform: rotate(90deg);
   transition: .3s;
}
.is-active .faq__item-question .icon::after {
   transform: rotate(180deg);
}

/* 回答
-------------------------------------*/
.faq__item-answer {
   background: #f3f3f3;
}
.faq__item-answer.faq__item-answer--count {
   background: #fff;
}
.faq__item-answer .inner{
   position: relative;
   margin: 0;
   padding: 1em 2.5em 2em 90px;
}
.faq__item-answer.faq__item-answer--count .inner::before {
   display: none;
}
.faq__item-answer .inner::before {
   position: absolute;
   left: 0;
   top: 0;
   width: 65px;
   height: 100%;
   font-size: 2.2rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
}
.faq__item-answer .inner::before {
   color:  var(--color-blue);
   content: "A";
}
.faq__item-answer th{
   background: #ddd;
}
.faq__item-answer th,
.faq__item-answer td{
   border-color: #ccc;
}

@media screen and (max-width: 767px) {
   .faq__conts__ttl{
      font-size: 1.7rem;
   }
   .faq__item-question{
      font-size: 1em;
      padding: 1.2em 3em 1.2em 55px;
   }
   .faq__item-question .icon{
      width: 3em;
   }
   .faq__item-answer .inner{
      font-size: 1em;
      padding: .5em 2em 1em 55px;
   }
   .faq__item-question::before,
   .faq__item-answer .inner::before{
      width: 40px;
      font-size: 1.6rem;
   }
}