@charset "UTF-8";
/*2020,04,16追加*/    
 /* reset */
button{background:transparent;border:none;cursor:pointer;outline:none;padding:0;appearance:none;}ul{list-style-type:none;margin:0;padding:0;}li,p{margin: 0;}
/* reset */



    
button{
text-align: center;
margin:25px auto 0 auto;
padding:20px 10px;
  display: block;
  cursor: pointer;
/*  background-color: linear-gradient(rgb(198,165,117) #fff);*/
font-size:26px;
color:#555;
border-bottom: 1px solid #ddba4d;
}
 .fa{
  
     float:right;
    transition: all 0.5s;
}

.open  .fa{
  transform:rotate(180deg);
}


.toggleList h4{
margin-top:0;
margin-bottom:0;
padding:10px 0 5px 0;
        }
.tuika{
    font-size:1em;
  position: relative;
  cursor: pointer;
}


.question:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
/*   要素の動きを指定 */
  
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 4px #000;
  border-right: solid 4px #000;
  
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
/* transform: rotateで要素の角度を指定 */
  
}

.question.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
/*   .openクラスがついた時の要素の角度を指定 */
}

 button:hover{
            color:#000;
        }
.toggleList ul{
margin:10px 0;    
}

.toggleMenu > li {
    line-height:1.5;
   padding:10px 20px 20px 20px;
  background-color: rgba(247,245,238,0.5);
 border-radius:0 0 13px 13px;
  /* 閉じるアニメーション */
  transition:
    border-top     .3s ease-out,
    padding-top    .3s ease-out,
    padding-bottom .3s ease-out;
}
.toggleList>h4{
    margin-bottom:10px;
}

ul.is-open > li {
  /* 開いている状態 */
  padding-top: 13px;
  padding-bottom: 13px;
  /* 開くアニメーション */
  transition:
    border-top     .3s ease-out,
    padding-top    .3s ease-out,
    padding-bottom .3s ease-out;
}
.redFont{
    color:red;
}