#sec7_parent{
    height:100%;
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sec7_title{
    font-weight: bold;
}

/* 質問文 */
.sec7_question{
    display: flex;
    align-items: center;
    cursor: pointer;
    padding:1em 2em;
    /* 展開時の角丸の設定 */
    border-radius:10px 10px 0 0
}

/* 解答文 */
.sec7_answer{
    display: none;
    padding: 2em;
}

/* 角丸の枠 */
.sec7_box {
    margin: 1.2em 0;
    font-size: 17px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

/* ＋ボタン */
.sec7_btn {
    position: relative;
    display: block;
    transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    will-change: transform;
}
 .sec7_btn:hover {
  transform: scale(0.92);
 }
.sec7_btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 75%;
  height: 3px;
  border-radius: 10px;
  background: #107173;
  display: block;
}
.sec7_btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 3px;
  height: 75%;
  border-radius: 10px;
  background: #107173;
  display: block;
  transition: 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

.sec7_btn.active:after {
  transform: translate(-50%, -50%) rotate(90deg);
  background: white;
}
.sec7_btn.active:before {
  background: white;
}

/*========= レイアウトのためのCSS ===============*/
/*========= PCサイズ ===============*/
@media screen and (min-width: 768px) {
  .sec7_box {
    width: 70%;
  }
  .sec7_btn {
    width: 4vw;
    height: 4vw;
  }
  .sec7_title{
    font-size: 40px;
  }
}
/*========= スマホサイズ ===============*/
@media screen and (max-width:767.9px) {
  .sec7_box {
    width: 100%;
  }
  .sec7_btn {
    width: 5vw;
    height: 5vw;
  }
  .sec7_title{
    font-size: 28px;
  }
}