@charset "utf-8";
/* CSS Document */

/* faq_menu
--------------------------------------------------------------------------- */

.faq_menu{
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.faq_menu li{
	width: calc((100% - 1%) / 3);
}
.faq_menu li a{
	font-weight: 600;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 20px;
	background-color: #D1E3EC;
	transition: 0.5s;
	border: 1px solid #D1E3EC;
	height: 100%;
}
.faq_menu li a:hover{
	text-decoration: none;
	border: 1px solid #16378A;
}
.faq_menu li a::after{
	content: "↓";
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	font-size: 1.2rem;
	right: -1px;
	bottom: -1px;
	background-color: #16378A;
	padding: 3px;
	width: 16px;
	height: 16px;
	color: #fff;
}

@media screen and (max-width: 767px) {
	.faq_menu li a{
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 480px) {
	.faq_menu{
		display: block;
	}
	.faq_menu li{
		width: 100%;
	}
	.faq_menu li + li{
		margin-top: 2%;
	}
}

/* faq_list
--------------------------------------------------------------------------- */

.faq_list li:first-child{
	margin-top: 36px;
}
.faq_list li + li{
	margin-top: 40px;
}
.faq_list li .main_txt{
	font-weight: 500;
	background-color: #F4F4F4;
	cursor: pointer;
	border: 1px solid #707070;
	padding: 17px 20px;
	transition: 0.3s all;
}
.faq_list li .main_txt:hover,
.faq_list li .main_txt:focus{
	background-color: #D1E3EC;
	border: 1px solid #16378A;
}
.faq_list li .main_txt p{
	position: relative;
	padding: 0 40px 0 50px;
}
.faq_list li .main_txt p:before{
	content: "Q.";
	position: absolute;
	top: -7px;
	left: 0;
	font-size: 3.4rem;
	color: #014099;
    margin: 0 17px 8px 0;
    line-height: 1;
}
.faq_list li .main_txt p span{
	position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}
.faq_list li .main_txt p span i{
	font-size: 3.0rem;
	color: #014099;
	padding: 0;
}
.faq_list li .main_txt p.active span i{
    transform: rotate(180deg);
}
.faq_list li .answer{
	display: none;
	border: 1px solid #707070;
	border-top: none;
	padding: 21px 20px;
}
.faq_list li .answer p{
	position: relative;
	padding: 0 0 0 50px;
	letter-spacing: -0.01em;
}
.faq_list li .answer p:before{
	content: "A.";
	position: absolute;
	top: -3px;
	left: 0;
	font-size: 3.4rem;
	font-weight: 500;
	color: #767676;
    margin: 0 17px 0 0;
    line-height: 1;
}

@media screen and (max-width: 767px) {
	.faq_list li:first-child{
		margin-top: 24px;
	}
	.faq_list li + li{
		margin-top: 30px;
	}
	.faq_list li .main_txt p{
        padding: 0 25px 0 36px;
	}
	.faq_list li .main_txt p:before{
		top: -2px;
		font-size: 2.6rem;
		margin: 0 14px 8px 0;
	}
	.faq_list li .main_txt p span i{
		font-size: 2.4rem;
	}
	.faq_list li .answer{
        padding: 15px 20px;
	}
	.faq_list li .answer p{
		padding: 0 0 0 36px;
	}
	.faq_list li .answer p:before{
		top: 0;
		font-size: 2.6rem;
	}
}
@media screen and (max-width: 480px) {
	.faq_list li:first-child{
		margin-top: 16px;
	}
	.faq_list li + li{
		margin-top: 20px;
	}
	.faq_list li .main_txt{
		padding: 15px 20px;
	}
	.faq_list li .main_txt p{
		font-size: 1.4rem;
        padding: 0 25px 0 36px;
	}
	.faq_list li .main_txt p:before{
		top: -2px;
		font-size: 2.2rem;
		margin: 0 14px 8px 0;
	}
	.faq_list li .main_txt p span i{
		font-size: 2.4rem;
	}
	.faq_list li .answer{
        padding: 15px 20px;
	}
	.faq_list li .answer p{
		font-size: 1.4rem;
		padding: 0 0 0 36px;
	}
	.faq_list li .answer p:before{
		top: 0;
		font-size: 2.6rem;
	}
}