@charset "utf-8";

.qa .arrow-m::before,
.qa .arrow-l::before { top: -5px;}

.qa .faq-intro {
  text-align: center;
}

.qa .faq-intro .inner {
  margin: 0 auto 1em;
  padding: 0;
  width: 94%;
  max-width: 100rem;
}

.qa .faq-intro .faq-intro-title {
  position: relative;
  margin: 0;
  padding: 0.8em;
  background-color: #00aeef;
  color: #fff;
  font-size: var(--font-size-l);
  line-height: 1.4;
  text-align: center;
}

.qa .faq-intro input {
  margin: 0 auto 1em;
  padding: 0.8rem;
  width: 80%;
  font-size: var(--font-size-l);
}

input{
  position: relative;
  padding: 0.5em 0.4em;
  width: 100%;
  display: block;
  outline: none;
  background-color: #fff;
  border: 0.1rem solid #ccc;
  border-radius: 0.2em;
  box-sizing: border-box;
  font-size: var(--font-size-m);
}

.highlight {
  padding: 0 0.5rem;
  background-color: #fffc00;
}


.faq-intro .button-parallel a.search:before {
  position: absolute;
  top: 0;
  left: 1rem;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-top: none;
  border-right: none;
  transform: rotate(0deg);
  display: block;
  background: url(/common/img/icon_search.svg) center center no-repeat;
  background-size: contain;
  content: "";
}
.faq-intro .button-parallel a.reset:before {
  position: absolute;
  top: 0;
  left: 1rem;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-top: none;
  border-right: none;
  transform: rotate(0deg);
  display: block;
  background: url(/common/img/icon_reset_02.svg) center center no-repeat;
  background-size: contain;
  content: "";
}
.answer-block{
  position: relative;
  padding: 0 0.5em 2em 2em;
}
.answer-block:before {
  position: absolute;
  top: -0.5rem;
  left: -0.6em;
  margin: auto;
  width: 3.5rem;
  height: 3.5rem;
  display: block;
  background: url(/common/img/icon_a.svg) center center no-repeat;
  background-size: contain;
  content: "";
}

.q-block { padding: 1em 1.8em 0;}

.q-block:before {
  position: absolute;
  top: -1rem;
  left: -1rem;
  margin: auto;
  padding: 0;
  width: 6rem;
  height: 6rem;
  display: block;
  border-radius: 50%;
  background: url(/common/img/icon_q_w.svg) center center no-repeat #00aeef;
  background-size: 80%;
  content: "";
  z-index: 20;
}
.q-block .inner .section-sub-title-01{
  padding-left: 1.1em;
  margin: 0.5em 0 0.2em;
  border: none;
}

.q-block.answer .section-sub-title-01,
.q-block .section-sub-title-01.list-title{ padding-left: 1.4em;}

.q-block .inner{
  border-bottom: 0.1rem solid #ccc;  
  padding: 0 0 0 1em;
}
.q-block .question-ul.open {margin: 0 0 1.5em 0;}
.question-ul {
  position: relative;
  padding: 0;
  width: 100%;
}
.question-ul li {
  position: relative;
  margin: 0 0 0.5em 0;
  padding: 0.8em 0 0.8em 3.4rem;
  border-bottom: 0.1rem dotted #ccc;
  list-style: none;
  font-size: var(--font-size-m);
  line-height: 1.5;
  text-align: left;
}
.question-ul li:before {
  position: absolute;
  top: 0.8em;
  left: -0.1rem;
  margin: auto;
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  background: url(/common/img/icon_q.svg) center center no-repeat;
  background-size: contain;
  content: "";
}

@media screen and (max-width: 780px) {
.submit-button-block .button {
  max-width: 20rem;
}
}

@media screen and (max-width: 640px) {
.faq .faq-intro .submit-button-block button {
  padding: 0.8em;
  font-size: var(--font-size-m);
  line-height: 1.2;
}

.submit-button-block{ width: 95%;}
.submit-button-block .button{ max-width: 12rem;}

.q-block { padding: 1em 1em 0;}

.q-block.answer .section-sub-title-01,
.q-block .section-sub-title-01.list-title{ padding-left: 1em;}

.q-block:before {
  top: -0.8rem;
  left: -0.8rem;
  width: 4.5rem;
  height: 4.5rem;
  background-size: 70%;
}

.inner .answer-block:before {
  position: absolute;
  top: -0.5rem;
  left: -0.5em;
  margin: auto;
  width: 3.2rem;
  height: 3.2rem;
}

}

@media screen and (max-width: 350px) {
.submit-button-block {
  display: flex;
  flex-direction: column;
}

.submit-button-block .button {
  max-width: 20rem;
  margin-bottom: 1em;
}
}

.aspect-6-7 { aspect-ratio: 6 / 7;}
.aspect-20-7 { aspect-ratio: 20 / 7;}
.aspect-14-5 { aspect-ratio: 14 / 5;}

.bg-yellow{background-color: #fffbd2;}

@media screen and (max-width: 740px) {
.faq-intro .button-parallel {
  align-items: center;
  flex-direction: column-reverse;
}
}