@charset "utf-8";

/* ------- INDEX ---------------------------------------------- */
.faq-list-item{
  margin-top: 10px;
}
.faq-list-item dt{
  background-color: #0CB4ED;
  color: #FFF;
  font-weight: 700;
  line-height: 1.66;
}
.faq-list-item > dt{
  cursor: pointer;
  position: relative;
}
.faq-list-item > dt:before{
  background: #2C2C2C url("../img/ic_faq_q.svg") center center no-repeat;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.faq-list-item > dt > span{
  background-color: #2C2C2C;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.faq-list-item > dt > span:before,
.faq-list-item > dt > span:after{
  background-color: #FFF;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: .2s;
}
.faq-list-item > dt > span:before{
  transform: translate(-50%,-50%);
}
.faq-list-item > dt > span:after{
  transform: translate(-50%,-50%) rotate(90deg);
}
.faq-list-item > dt.active > span:after{
  transform: translate(-50%,-50%) rotate(0deg);
  visibility: hidden;
}
.faq-list-item > dd{
  background-color: #F3F3F2;
  display: none;
  position: relative;
}
.faq-list-item > dd:before{
  content: "";
  display: block;
  position: absolute;
}
@media print, screen and (min-width:781px) {
  .faq-list{
    margin-top: 80px;
  }
  .faq-list-item > dt{
    font-size: 2.0rem;
    padding: 20px 70px 20px 105px;
  }
  .faq-list-item > dt:before{
    width: 70px;
  }
  .faq-list-item > dt > span{
    height: 30px;
    width: 30px;
    right: 20px;
  }
  .faq-list-item > dt > span:before,
  .faq-list-item > dt > span:after{
    width: 10px;
  }
  .faq-list-item > dd{
    padding: 40px 40px 40px 105px;
  }
  .faq-list-item > dd:before{
    background: url("../img/ic_faq_a.svg") center center no-repeat;
    border-right: 1px solid #2C2C2C;
    left: 0;
    top: 40px;
    bottom: 40px;
    width: 70px;
  }
}
@media screen and (max-width: 780px) {
  .faq-list{
    margin-top: 60px;
  }
  .faq-list-item > dt{
    font-size: 1.6rem;
    padding: 20px 60px 20px 60px;
  }
  .faq-list-item > dt:before{
    width: 40px;
  }
  .faq-list-item > dt > span{
    height: 20px;
    width: 20px;
    right: 20px;
  }
  .faq-list-item > dt > span:before,
  .faq-list-item > dt > span:after{
    width: 10px;
  }
  .faq-list-item > dd{
    padding: 20px 20px 20px 60px;
  }
  .faq-list-item > dd:before{
    background: url("../img/ic_faq_a.svg") center top no-repeat;
    background-size: 13px auto;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: 13px;
  }
}
@media (hover: hover) and (pointer: fine){
}