@charset "utf-8";

.qa_box{
  background-color: #243B75;
  margin: 10px;
  padding: 10px;
}
.qa-check{
    display: none;
}
.qa-label{
    background: #fff;
    font-size: 1.5rem;
    line-height: 2rem;
    color: #000;
    display: block;
    margin-bottom: 1px;
    padding: 10px 10px 10px 50px;
    position: relative;
    border-radius: 5px;
}
.qa-label:before {
  box-sizing: border-box;
  content: 'Q';
  color: #A80B0B;
  font-weight: bold;
  display: block;
  position: absolute;
  height: 52px;
  padding: 10px;
  margin: 10px;
  left: 0;
  top: -10px;
}
.qa-label:after{
    box-sizing: border-box;
    content: '＋';
    color: #243B75;
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    height: 52px;
    padding: 10px;
    margin: 10px;
    position: absolute;
    right: 0;
    top: -10px;
}
.qa-content{
    display: block;
    background-color: #eeeeee;
    border-radius: 0 0 5px 5px;
    color: #000;
    height: 10px;
    opacity: 0;
    padding: 0 10px 0 80px;
    transition: .5s;
    visibility: hidden;
    position: relative;
}
.qa-content:before {
  box-sizing: border-box;
  content: 'A';
  color: #243B75;
  font-weight: bold;
  display: block;
  position: absolute;
  height: 52px;
  padding: 10px;
  margin: 10px;
  left: 0;
  top: -10px;
}
.qa_text {
  padding-left: 50px;
}
.qa-check:checked + .qa-label:after{
    content: '－';
    color: #243B75;
    font-weight: bold;
    height: 100px;
}
.qa-check:checked + .qa-label + .qa-content{
    height: auto;
    opacity: 1;
    padding: 10px;
    margin-bottom: 5px;
    visibility: visible;
}

@media (max-width: 768px) {
  .qa-label{
    padding: 10px 40px 10px 40px;
  }
  .qa-label:before {
    padding: 10px 5px;
    margin: 10px;
  }
  .qa-label:after{
    padding: 10px 5px;
    margin: 10px;
  }
  .qa-content{
    padding: 0 10px 0 50px;
  }
}