/* Ingredient Section */
.faqs-sec {
  width: 100%;
  position: relative;
  padding-top: 8rem;
  padding-bottom: 230px;

  background-image: url(../img/index/mobbackground.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;

  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 62.4%;
  grid-template-rows: min-content 1fr;
  min-height: calc(100vh - 371px);

  grid-template-areas:
    "title img"
    "content content"
  ;
  --padding-width: 36px;
}
.faqs-title {
  font-size: 24px;
  line-height: 1.29;
  letter-spacing: 0.3em;
  text-align: left;
  color: #a2a2a2;
  writing-mode: vertical-lr;

  padding-left: var(--padding-width);
  grid-area: title;
}
.faqs-img {
  grid-area: img;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: transparent;
  color: #b9823b;
  /*cursor: pointer;*/
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;

  font-size: 22px;
  padding: 23px 0 20px 0;
  border-bottom: 1px solid #dedede;

}


/* Style the accordion panel. Note: hidden by default */
.panel {
  font-size: 13px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel-content {
  margin-top: 20px;
  margin-bottom: 20px;
}

.accordion:after {
  /*content: '\02795'; !* Unicode character for "plus" sign (+) *!*/
  content: '＋'; /* Unicode character for "plus" sign (+) */
  font-size: 22px;
  /*color: #777;*/
  color: currentColor;
  float: right;
  margin-left: 5px;
}

.accordion.active:after {
  content: "－"; /* Unicode character for "minus" sign (-) */
}

.faq-content {
  grid-area: content;
  margin: var(--padding-width);
}

.pagination {
  text-align: center;
}
.pagination-wrapper {
  padding-bottom: 50px;
}
.pagination li {
  display: inline-block;
  color: #b8813b;
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1.7;
  margin: 0.25em;
  border-radius: 9999px;
  border: 1px solid currentColor;
}
.pagination li a {
  display: block;
}
.pagination li.active {
  background-color: #b8813b;
  color: #F4F4EE;             /* 文字設為透明 */
}
@media (min-width: 768px) {
  .faqs-sec {
    padding-top: 12rem;
    background-image: url(../img/index/webbackground.png);

    margin: 0 auto;
    display: grid;
    grid-template-columns: 7fr 143px 25vw 30vw 10fr;
    grid-template-rows: min-content;
    min-height: calc(100vh - 371px);

    grid-template-areas:
    ". title img content ."
  ;
    --padding-width: 36px;
  }
  .faqs-title {
    font-size: 50px;
  }
  .faq-content {
    margin-top: 0;
  }
  .accordion {
    font-size: 20px;
  }
  .panel {
    font-size: 15px;
  }
  .pagination {
    text-align: right;
  }
  .pagination li {
    width: 40px;
    height: 40px;
    font-size: 22px;
    text-align: center;
  }
}

@media (min-width: 1536px) {

}