@charset "UTF-8";
/* CSS FAQ*/

/* -----------------------------------------------
 faq css
-------------------------------------------------- */
/*-- FAQ/ACCORDION --*/
div.faq {
  width: 100%;
  margin-bottom: 4em
}
div.faq > ul > li > a {
	display: block;
	color: var(--red);
	font-size: 20px;
	text-decoration: none;
	background-color: white;
	cursor: pointer;
	padding: 15px 15px 20px;
	position: relative;
    margin-bottom: 1em;
    border-radius: 10px;
	border: 1px solid var(--red)
}
div.faq > ul > li > a span {
    font-weight: 400
}
div.faq > ul > li > a:hover{
	background-color: var(--red);
    opacity: 1;
    color: white
}
div.faq > ul > li > a::before,
div.faq > ul > li > a::after,
div.faq > ul > li > a.active:after{
	position: absolute;
	right: 20px;
    top:25px;
    content: '';
    width: 2px;
    height: 15px;
    background-color:var(--red);
    transition: .1s
}
div.faq > ul > li > a:hover::before,
div.faq > ul > li > a:hover::after{
	background-color: white;
}
div.faq > ul > li > a::after{
    transform: rotate(90deg);
}
div.faq > ul > li > a.active::before{
   transform: rotate(90deg);

}

div.faq > ul > li > ul {
  display: none;
}
div.faq > ul > li > ul > li,
div.faq > ul > li > ul > li p{
  display: block;
  font-size: 20px!important;
  padding: 6px 12px;
  position: relative;
  margin-bottom:1em
}
div.faq > ul > li > ul > li a{
  font-size: 20px;
}

/* -----------------------------------------------
SP 599px
-------------------------------------------------- */
@media screen and (max-width: 599px) {
div.faq > ul > li > a,
div.faq > ul > li > ul > li,
div.faq > ul > li > ul > li p,
div.faq > ul > li > ul > li a{
  font-size: 16px!important;
 }
div.faq > ul > li > a {
	padding: 15px 40px 20px 15px;
}
}