@charset "utf-8";
/* CSS Document */
/* - faq.css - */
.box + .pan {
  margin-top: 0;
}
.faq__list {
  display: block;
  margin: calc(60 / 750 * 100%) auto;
  box-sizing: border-box;
  width: calc(670 / 750 * 100%);
  background: url(../shared/img/dot_line_or_l.svg) no-repeat bottom left;
  -webkit-background-size: auto 2px;
  background-size: auto 2px;
  box-sizing: border-box;
  padding-bottom: 2px;
}

.faq__item pre {
  white-space: pre-line;
}
.faq__item {
  background: url(../shared/img/dot_line_or_l.svg) no-repeat top left;
  -webkit-background-size: auto 2px;
  background-size: auto 2px;
  box-sizing: border-box;
  padding-top: 2px;
}
.faq__item .faq__q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: calc(20 / 670 * 100%) calc(50 / 670 * 100%) calc(20 / 670 * 100%) calc(20 / 670 * 100%);
  position: relative;
  cursor: pointer;
}
.faq__item .faq__q:before {
  content: "";
  display: block;
  width: calc(110 / 670 * 100%);
  height: 0;
  padding-bottom: calc(120 / 670 * 100%);
  background: url(../shared/img/ic_faq_q.svg) no-repeat 0% 50%;
  -webkit-background-size: 80% auto;
  background-size: 80% auto;
}
.faq__q span {
  font-size: var(--fs-26);
  font-weight: 500;
  line-height: calc(26 / 16 * 1em);
  display: block;
}
.faq__q span:before {
  content: "";
  display: block;
  width: 0.8em;
  height: 3px;
  background-color: var(--c-br);
  position: absolute;
  top: 50%;
  right: 0.5em;
  transition: all .5s ease;
  transform: rotate(0deg);
  opacity: 1;
}
.faq__q span:after {
  content: "";
  display: block;
  width: 0.8em;
  height: 3px;
  background-color: var(--c-br);
  position: absolute;
  top: 50%;
  right: 0.5em;
  transition: all .5s ease;
  transform: rotate(90deg);
  opacity: 1;
}
.faq__q--open span:before {
  content: "";
  transform: rotate(90deg);
  opacity: 0;
}
.faq__q--open span:after {
  content: "";
  transform: rotate(180deg);
  opacity: 1;
}
.faq__a {
  display: none;
}
.faq__item .faq__text {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0 0 calc(40 / 670 * 100%);
}
.faq__item pre {
  font-size: var(--fs-26);
  font-weight: 500;
  line-height: calc(26 / 16 * 1em);
  background: var(--c-lor);
  border-radius: var(--fs-20);
  padding: calc(30 / 670 * 100%);
  
}

/* -------------------------------------------- */
@media screen and (min-width:1000px){
  .faq__list {
  max-width: 1020px;
  padding: 0 10px 3px;
  margin: 60px auto 0;
  box-sizing: border-box;
  width: 100%;
  background: url(../shared/img/dot_line_or_l.svg) no-repeat bottom left;
  -webkit-background-size: auto 3px;
  background-size: auto 3px;
}
.faq__item {
  background: url(../shared/img/dot_line_or_l.svg) no-repeat top left;
  -webkit-background-size: auto 3px;
  background-size: auto 3px;
  padding-top: 3px;
}
.faq__item .faq__q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 0 40px;
  position: relative;
  cursor: pointer;
  gap: 40px;
}
.faq__item .faq__q:before {
  content: "";
  display: block;
  width: 40px;
  height: 0;
  padding-bottom: 120px;
  background: url(../shared/img/ic_faq_q.svg) no-repeat 0% 50%;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}
.faq__q span {
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: calc(28 / 18 * 1em);
  display: block;
}
.faq__q span:before {
  content: "";
  display: block;
  width: 14px;
  height: 3px;
  background-color: var(--c-br);
  position: absolute;
  top: 50%;
  right: 30px;
  transition: all .5s ease;
  transform: rotate(0deg);
  opacity: 1;
}
.faq__q span:after {
  content: "";
  display: block;
  width: 14px;
  height: 3px;
  background-color: var(--c-br);
  position: absolute;
  top: 50%;
  right: 30px;
  transition: all .5s ease;
  transform: rotate(90deg);
  opacity: 1;
}
.faq__q--open span:before {
  content: "";
  transform: rotate(90deg);
  opacity: 0;
}
.faq__q--open span:after {
  content: "";
  transform: rotate(180deg);
  opacity: 1;
}
.q__item .faq__text {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0 0 calc(40 / 670 * 100%);
}
.faq__item pre {
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: calc(26 / 16 * 1em);
  background: var(--c-lor);
  border-radius: var(--fs-20);
  padding: 40px 50px;
  
}
  
}