@charset "UTF-8";
/*------------------------------------------------------------------------------
    config
------------------------------------------------------------------------------*/
/***  media ***/
/***  color ***/
/*** font ***/
#faq {
  text-align: center;
  color: #2C2C2C;
}
#faq .h2_ttl {
  color: #ffffff;
}
#faq .h2_ttl span {
  color: #ffffff;
}
#faq .faq-list .faq-list_txt {
  margin-bottom: 30px;
  background: #ffffff;
  padding: 40px;
  border-radius: 20px;
}
@media screen and (max-width: 850px) {
  #faq .faq-list .faq-list_txt {
    padding: 25px 20px;
    margin-bottom: 20px;
    border-radius: 10px;
  }
}
#faq .faq-list label {
  position: relative;
  display: flex;
  margin-top: 0;
  cursor: pointer;
}
#faq .faq-list label:first-of-type {
  margin-top: 0;
}
#faq .faq-list label .faq-q {
  width: 100%;
  text-align: left;
  font-weight: bold;
  font-size: 20px;
  color: #278D44;
  letter-spacing: 0.05em;
  line-height: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 850px) {
  #faq .faq-list label .faq-q {
    font-size: 16px;
  }
}
#faq .faq-list label .q-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 100%;
  letter-spacing: 0.2em;
  font-size: 30px;
  line-height: 100%;
  display: none;
}
@media screen and (max-width: 850px) {
  #faq .faq-list label .q-icon {
    font-size: 20px;
  }
}
#faq .faq-list label:after {
  content: '';
  display: block;
  background: url(../img/common/add.png) center no-repeat;
  background-size: 100%;
  width: 46px;
  height: 46px;
  position: absolute;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: rotate(90deg);
  top: calc(50% - 23px);
  right: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (max-width: 850px) {
  #faq .faq-list label:after {
    width: 26px;
    height: 26px;
    top: calc(50% - 13px);
  }
}
#faq .faq-list input[type="checkbox"]:checked + label:after {
  content: '';
  display: block;
  background: url(../img/common/move.png) center no-repeat;
  background-size: 100%;
  width: 46px;
  height: 46px;
  position: absolute;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: rotate(180deg);
  top: calc(50% - 23px);
  right: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (max-width: 850px) {
  #faq .faq-list input[type="checkbox"]:checked + label:after {
    width: 26px;
    height: 26px;
    top: calc(50% - 13px);
  }
}
#faq .faq-list input[type="checkbox"].on-off {
  display: none;
}
#faq .faq-list .acc-inner {
  display: flex;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0;
  padding: 0;
  list-style: none;
}
#faq .faq-list .acc-inner .a-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  color: #ffffff;
  background: #2C2C2C;
  border-radius: 100%;
  margin-bottom: 10px;
}
@media screen and (max-width: 850px) {
  #faq .faq-list .acc-inner .a-icon {
    font-size: 18px;
    height: 45px;
  }
}
#faq .faq-list .acc-inner .acc_box {
  width: 100%;
  text-align: left;
  padding: 20px 30px 0 0;
  font-size: 18px;
  font-weight: 400;
}
@media screen and (max-width: 850px) {
  #faq .faq-list .acc-inner .acc_box {
    font-size: 13px;
    padding: 10px 30px 0 0;
  }
}
#faq .faq-list label + .acc-inner {
  position: relative;
  /*height: 0;*/
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: max-height 0.5s;
}
#faq .faq-list input[type="checkbox"].on-off:checked + label + .acc-inner {
  max-height: 500px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: max-height 0.5s;
}
#faq .faq-list input[type="checkbox"].on-off:checked + label .acc-inner {
  /*position: relative;*/
  overflow: initial;
  transition: none;
}
#faq .faq-list:last-of-type {
  margin-bottom: 0;
}