html { 
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

html.unset {
  scroll-behavior: unset;
}

.qa ul.anchorlink {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  padding: 48px 0;
  flex-wrap: wrap;
  text-align: center;
}

.qa ul.anchorlink li {
  background: var(--white);
  border: 1px solid var(--frame-line);
  width: 160px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--nav-black);
  padding: 4px 0;
  line-height: 1.2;
}

.qa ul.anchorlink li:hover {
  color: var(--white);
  background: var(--midashi-brown);
  border: none;
}

.qa section.qa_category {
  padding: 48px 0;
}

.qa section.qa_category h2 {
  text-align: center;
  padding-bottom: 48px;
  color: var(--midashi-brown);
}

.qa_wrap + .qa_wrap {
  padding-top: 24px;
}

.question_wrap,
.answer_main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-right: 24px;
}

.question_icon,
.answer_icon {
    font-family: 'Noto Serif JP';
    font-style: normal;
    font-weight: 500;
    font-size: 2.6rem;
    line-height: 1.0rem;
    width: 50px;
    height: 50px;
    color: var(--frame-subtitle);
    align-items: center;
}

.question_icon {
    background-color: var(--white);
}

.answer_icon {
  background: var(--logo);
  color: var(--white);
}

.qa_label {
	position: relative;
  padding: 15px 0 15px 24px;
}

.qa_label::after {
    content: url('../img/qa_arrow.svg');
    display: block;
    position: absolute;
    width: 16.6px;
    height: auto;
    top: 52%;
    right: 24px;
    transform: translate(-50%, -50%);
}

.answer_inner {
    background: var(--white);
    padding: 24px 10px 24px 24px;
    border: 1px solid var(--logo);
}

.question_icon,
.question_body,
.answer_icon,
.answer_body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.question_body,
.answer_body {
    justify-content: start;
}

.question_body {
    width: calc(100% - 85px);
    padding: 0px 60px 0px 26px;
    align-items: center;
    color: var(--white);
}

.answer_body {
    width: calc(100% - 50px);
    padding: 0 0 0 16px;
    min-height: 46px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.answer_body a {
    color: var(--basic);
    text-decoration: underline;
}

.answer_opt {
  margin-top: 24px;
  padding: 0 32px;
}

/*アコーディオンの開閉*/
.qa_checkbox  {
  display: none;
}

.qa_label {
  display: block;
  background: var(--logo);
}

.link_over .qa_label {
  cursor: pointer;
}

.answer_wrap {
  height: 0;
  opacity: 0;
  transition: .2s;
  visibility: hidden;
}

.qa_checkbox:checked + .qa_label + .answer_wrap {
  height: auto;
  opacity: 1;
  visibility: visible;
}

.qa_checkbox:checked + .qa_label::after {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  top: 35%;
  right: 22px;
}

.qa section.qa_category.qa_btn {
  padding: 48px 0 0;
}

.qa_btn p {
  text-align: center;
  padding-bottom: 24px;
}


@media (max-width: 1090px) {
  .qa ul.anchorlink {
    justify-content: flex-start;
    gap: 8px 8px;
    width: 496px;
    margin: 0 auto;
  }
}


/* for smaller device */
@media (max-width: 650px) {
  html {
    scroll-padding-top: 80px;
  }

  .qa ul.anchorlink {
    width: 348px;
    padding: 24px 0 0;
  }

  .qa ul.anchorlink li {
    width: 110px;
    height: 35px;
    padding: 0;
  }

  .qa ul.anchorlink .reservation li {
    letter-spacing: -0.4px;
  }

  .qa ul.anchorlink .album li {
    letter-spacing: -1px;
  }

  .qa .album {
    line-height: 14px;
    letter-spacing: -1.2px;
  }

  .qa section.qa_category {
    padding: 24px 0;
  }

  .qa section.qa_category h2 {
    padding-bottom: 24px;
  }

  .qa_wrap + .qa_wrap {
    padding-top: 16px;
  }

  .qa section.qa_category.qa_btn {
    padding: 24px 0 0;
  }

  .question_icon,
  .answer_icon {
    width: 35px;
    height: 35px;
    font-size: 2.0rem;
    padding: 0;
  }

  .question_wrap,
  .answer_main {
    padding-right: 16px;
  }

  .question_body {
    width: calc(100% - 43px);
    padding: 20px 41px 20px 16px;
  }

  .qa_label {
    padding: 13px 0 13px 16px;
  }

  .qa_label::after {
    content: url('../img/qa_arrow_sp.svg');
    width: 10px;
    right: 16px;
    top: 50%;
  }

  .qa_checkbox:checked + .qa_label::after {
    top: 40%;
    right: 16px;
  }

  .answer_inner {
    padding: 14px 0 14px 16px;
  }

  .answer_body {
    width: calc(100% - 35px);
    padding: 0 0 0 8px;
    min-height: 35px;
  }
  
  .answer_opt {
    padding: 0 22px;
  }

  .qa_btn p {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .qa ul.anchorlink {
    width: 292px;
    padding: 48px 0 30px;
  }

  .qa ul.anchorlink li {
    width: 92px;
  }

  .question_body {
    padding: 0 16px 0 8px;
  }

  .qa_label::after {
    width: 8px;
    height: 8px;
    right: 16px;
  }

  .qa_checkbox:checked + .qa_label::after {
    top: 48%;
    right: 12px;
  }

  #album h2 {
    margin: 0 -10px;
  }
}