/*
SPMENU*/


ul.faq {
display: block;
}


.faq {
    position: relative;
    width: 100%;
/*    height: 50px;*/
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 50px;
}



.contentsbox__gray ul.faq li {
    display: block;
border-radius: 10px;
background: #fff;

}


.contentsbox__gray ul.faq li + li {
    border-top: none;
    margin-top: 20px;
    padding: 0px;
}



ul.faq a,ul.faq label {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.0;
    color: #000;
    padding: 21px 25px 21px 30px;
}

ul.faq .menu__second-level {
display: block;
}

ul.faq .menu__second-level a {
font-weight: normal;
font-size: 1.4rem;
padding: 15px 15px 15px 30px;
}

.faq__toggle {
display: none;
}
.faq__option {
position: relative;
margin-bottom: 1em;
}
.faq__title,
.faq__content p {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.faq__title {
display: block;
}

.faq__content p {
max-height: 0;
overflow: hidden;
margin-left: 90px;
margin-right: 20px;
display: block;

}

.faq__toggle + .faq__title + .faq__content {
position: relative;

}

.faq__toggle:checked + .faq__title + .faq__content {
padding-bottom: 20px;
position: relative;

}
 


.faq__toggle:checked + .faq__title + .faq__content p {
max-height: 1000px;
transition: all 0.5s;
border-radius: 10px;
background: #fff2f2;
padding: 20px;
}


.faq__toggle + .faq__title + .faq__content::before {
   content: "";
   font-family: Arial;
font-weight: normal;
font-size: 2.6rem;
line-height: 40px;
color: #fff;
display: block;
text-align: center;
   width: 0px;
   height: 0px;
   border-radius: 50%;
   background-color: #d95b5b;
   margin-right: 20px;
   position: absolute;
   top: 0;
   left: 30px;
   transition: all 0.5s;
  }
  
.faq__toggle:checked + .faq__title + .faq__content::before {
   content: "A";
   font-family: Arial;
font-weight: normal;
font-size: 2.6rem;
line-height: 40px;
color: #fff;
display: block;
text-align: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #d95b5b;
   margin-right: 20px;
   position: absolute;
   top: 0;
   left: 30px;
   transition: all 0.5s;
  }
 
.faq__title::before {
   content: "Q";
   font-family: Arial;
font-weight: normal;
font-size: 2.6rem;
line-height: 40px;
color: #fff;
display: inline-block;
text-align: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #438a60;
   margin-right: 20px;
  }
 

/* ウィンドウ幅が0〜959pxの場合に適用するCSS */
@media screen and ( max-width:959px )
{


.faq__title::before {
    position: absolute;
    left: 20px;

  }
  ul.faq a, ul.faq label {
    padding: 21px 25px 21px 70px;
    line-height: 1.2;
}


.faq__toggle:checked + .faq__title + .faq__content::before {
left: 20px;
}



.faq__content p {
    margin-left: 70px;
}










  }