@charset 'utf-8';

/* common
------------------------------------------------ */
#main { padding-top: 0; }

@media screen and (max-width: 768px) {
  .page-hd { background-image: url(../../img/qa/title.jpg); }
}

@media screen and (min-width: 769px) {
  .page-hd { background-image: url(../../img/qa/title-pc.jpg); }
}

/* qa
------------------------------------------------ */
.qa { position: relative; }


/* content
------------------------------------------------ */
.qa-content { position: relative; }

/* main
------------------------------------------------ */
.qa-main { position: relative; margin-top: 20px; }
.qa-main-top { display: flex; margin-bottom: 25px; }
.qa-main-top--text { text-align: justify; font-size: 1.3rem; line-height: 2; }
.qa-main-top--text a { text-decoration: underline; }
.device-click .qa-main-top--text a:hover { text-decoration: none; }

@media screen and (max-width: 768px) {
  .qa-main { padding: 0 30px; }
  .qa-main-top { flex-flow: column-reverse; }
  .qa-main-top--illust { margin: 0 10px 10px; }
}

@media screen and (min-width: 769px) {
  .qa-main { margin: 40px auto 0; max-width: 1050px; }
  .qa-main-top { justify-content: center; align-items: center; margin-bottom: 30px; }
  .qa-main-top--text { width: 39.0476190476%; font-size: 1.4rem; line-height: 2.10714285714; }
  .qa-main-top--illust { margin-left: 5.71428571429%; width: 33.3333333333%; }
}

/* lists
------------------------------------------------ */
.qa-lists { counter-reset: lists-num 0; position: relative; border-top: 1px solid #534741; }
.qa-lists-item { border-bottom: 1px solid #534741; }
.qa-lists-box { counter-increment: lists-num 1; position: relative; }
.qa-lists-box--q > span,
.qa-lists-box--a { position: relative; padding: 0 0 24px 60px; }
.qa-lists-box--q::before,
.qa-lists-box--a::before { position: absolute; left: 0; font-family: 'Overpass', sans-serif; font-size: 2.4rem; font-weight: 600; line-height: 1.2; }
.qa-lists-box--q { font-size: 1.5rem; font-weight: 700; line-height: 1.66666666667; }
.qa-lists-box--q::before { content: 'Q'counter(lists-num); top: 24px; }
.qa-lists-box--q > span { display: block; padding-top: 24px; padding-right: 35px; cursor: pointer; }
.qa-lists-box--q > span::before,
.qa-lists-box--q > span::after { content: ''; position: absolute; top: 50%; right: 0; transition: ease 0.4s; width: 14px; height: 1px; background-color: #534741; }
.qa-lists-box--q > span::after { transform: rotate(90deg); }
.qa-lists-box--q > span.active::after { transform: rotate(0); }
.qa-lists-box--a { display: none; font-size: 1.2rem; line-height: 1.83333333333; }
.qa-lists-box--a p + p { margin-top: 1.83333333333em; }
.qa-lists-box--a a { text-decoration: underline; }
.device-click .qa-lists-box--a a:hover { text-decoration: none; }
.qa-lists-box--a::before { content: 'A'counter(lists-num); }

@media screen and (max-width: 768px) {
}

@media screen and (min-width: 769px) {
  .qa-lists-box--q > span,
  .qa-lists-box--a { padding: 0 0 26px 126px; }
  .qa-lists-box--q::before,
  .qa-lists-box--a::before { left: 42px; font-size: 3rem; }
  .qa-lists-box--q { font-size: 1.6rem; }
  .qa-lists-box--q > span { padding-top: 26px; padding-right: 65px; }
  .qa-lists-box--q > span::before,
  .qa-lists-box--q > span::after { right: 26px; width: 12px; }
  .qa-lists-box--a { font-size: 1.4rem; line-height: 1.82142857143; }
  .qa-lists-box--a p + p { margin-top: 1.82142857143em; }
}