@charset "utf-8";

/*========= アコーディオンメニューのためのCSS ===============*/
.question {
  width: 100%;
  margin: 0 0 20px 0;
}
.question.last {
  margin: 0 0 100px 0;
}

.question__inner {
  width: inherit;
}

/* 質問と回答の見た目 */
.question__text,
.question__reply {
  display: flex;
  align-items: center;
  width: 80%;
  margin: 0 auto 0 auto;
  padding: 20px 0 20px 20px;
  color: #fff;
  box-sizing: border-box;
}

/* 質問の見た目 */
.question__text {
  cursor: pointer;
  position: relative;
  background-color: #ffffff22;
  border-bottom: 1px solid #fff;
}

/* 回答の見た目 */
.question__reply {
  display: none;
  padding: 20px 20px 20px 20px;
  background-color: #fff3;
}
.question__reply h3{
  margin: 0 0 0.2rem 0;
  padding: 0;
  text-align: justify;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.8rem;
}
.question__reply p{
  margin: 0 0 2rem 0;
  padding: 0;
  text-align: justify;
  font-size: 1rem;
  line-height: 2rem;
}
.question__reply p:last-child{
  margin: 0;
}
.question__reply figure{
  margin: 0 0 2rem 0;
  padding: 0;
  text-align: center;
}
.question__reply figure img{
  width: 50%;
  height: auto;
}
.question__reply ul{
  margin: -2.5rem 0 0.6rem 6rem;;
  font-size: 1rem;
  line-height: 1.8rem;
}
.question__reply ol{
  margin: -2.5rem 0 0.6rem 6rem;
  font-size: 1rem;
  line-height: 1.8rem;
}

/* プラスマークの横部分 */
.question__text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 24px;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
}

/* プラスマークの縦部分 */
.question__text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 31px;
  width: 2px;
  height: 24px;
  background: #fff;
  transform: translateY(-50%);
  transition: .3s;
}

/* 回答表示時にプラスマークの縦部分を消す */
.question__text.open::after {
  top: 25%;
  opacity: 0;
  transform: rotate(90deg);
}



/* 山口追加 */

.question__text2 ,
.question__reply2 {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 20px 0 20px 20px;
  color: #fff;
  box-sizing: border-box;
}

/* 質問の見た目 */
.question__text2 {
  cursor: pointer;
  position: relative;
  flex-wrap: wrap;
  background-color: rgb(41, 41, 41);
  background-color: #006934;
  border-bottom: 1px solid #fff;
}
.question__text2 span{
  margin: 0 0 0 20px;
  font-size: 0.8rem;
}

/* 回答の見た目 */
.question__reply2 {
  display: none;
  padding: 20px 0.5rem 20px 0.5rem;
  background-color: #fff1;
}
.question__reply2 h3{
  margin: 3rem 0 0.4rem 0;
  padding: 0 0 0.4rem 0;
  text-align: justify;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.8rem;
  border-bottom: 0.5px solid #fff;
}
.question__reply2 p{
  margin: 0 0 6rem 0;
  padding: 0;
  text-align: justify;
  font-size: 1rem;
  line-height: 2.2rem;
}
.question__reply2 p:last-child{
  margin: 0;
}
.question__reply2 figure{
  margin: 0 0 2rem 0;
  padding: 0;
  text-align: center;
}
.question__reply2 figure img{
  width: 50%;
  height: auto;
}

.question__reply2 ul{
  margin: 1.4rem 1.4rem 1.4rem 3rem;
  font-size: 1rem;
  line-height: 1.8rem;
}


/* プラスマークの横部分 */
.question__text2::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 24px;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
}

/* プラスマークの縦部分 */
.question__text2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 31px;
  width: 2px;
  height: 24px;
  background: #fff;
  transform: translateY(-50%);
  transition: .3s;
}

/* 回答表示時にプラスマークの縦部分を消す */
.question__text2.open::after {
  top: 25%;
  opacity: 0;
  transform: rotate(90deg);
}



/* ########### 599px以下(smartphone) ########### */
@media (max-width: 599px) {

  .question__text{
    display: block;
  }
  .question__text,
  .question__reply {
    width: 100%;
    padding: 20px 10px 20px 10px;
  }
  .question__text2 span {
    margin: 5px 0 0 0;
  }

  main section#sec03 ul {
    margin: -2.5rem 0 0.6rem 3rem;
  }
  .question__reply ol{
    margin: -2.5rem 0 0.6rem 3rem;
  }

}


/* ########### 600px以上～768px以下(tablet) ########### */
@media (min-width: 600px) and (max-width: 768px) {

  .question__text,
  .question__reply {
    width: 90%;
  }

  main section#sec03 p{
    padding: 0;
  }

  main section#sec03 ul {
    margin: -1rem 0 0.6rem 3rem;
  }
  .question__reply ol{
    margin: -1rem 0 0.6rem 3rem;
  }

}


/* ########### 769px以上(PC) ########### */
@media (min-width: 769px) {

  .question__text,
  .question__reply {
    width: 90%;
  }

  main section#sec03 p{
    padding: 0;
  }

  main section#sec03 ul {
    margin: -1rem 0 0.6rem 4rem;
  }
  .question__reply ol{
    margin: -1rem 0 0.6rem 4rem;
  }

}


/* ########### 1000px以上(PC) ########### */
@media (min-width: 1000px) {

  main section#sec03 p{
    padding: 0 2rem;
  }

  main section#sec03 ul {
    margin: -1rem 0 0.6rem 6rem;
  }
  .question__reply ol{
    margin: -1rem 0 0.6rem 6rem;
  }

}