@charset "utf-8";

/**
 *
 *  Q&A index
 *
 */

/*--------------------------------------------------------------------------
   overwrite  - 共通CSSの上書き -
---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------
	 faq
---------------------------------------------------------------------------*/
.faq{
	padding: 50px 0 70px;
}

/* faq__block
-----------------------------------------------------------------*/
.faq__block{
	border: 1px solid #0e0d6a;
	border-radius: 5px;
}
.faq__block + .faq__block{
	margin-top: 50px;
}
.faq__block__ttl{
	padding: 15px 0;
	border-radius: 5px 5px 0 0;
	background: #ffec70;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
}


/* faq__units
-----------------------------------------------------------------*/
.faq__units{
	padding: 0 40px;
	border-radius: 0 0 5px 5px;
	background: #fff;
}
.faq__unit{
	padding: 40px 0;
}
.faq__unit + .faq__unit{
	border-top: 1px solid #d6e3f2;
}
.faq__unit dt{
	position: relative;
	padding-left: 60px;
	font-size: 18px;
	font-weight: 700;
	line-height: 38px;
}
.faq__unit dd{
	position: relative;
	margin-top: 13px;
	padding-top: 8px;
	padding-left: 60px;
}
.faq__unit dt:before,
.faq__unit dd:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	line-height: 38px;
}
.faq__unit dt:before{
	content: 'Q';
	bottom: 0;
	margin: auto;
	background: #f38141;
	color: #fff;
}
.faq__unit dd:before{
	content: 'A';
	background: #e6ebf1;
}

.faq__unit dd p + p {
	margin-top: 20px;
}

.faq__unit a {
	color: #0e0d6a;
	text-decoration: underline;
}

.faq__unit a:hover {
	text-decoration: none;
}

/* media query -> sp
=================================================================*/
@media screen and (max-width: 768px){
	.faq{
		padding: 30px 15px 50px;
	}

	/* faq__block
	-----------------------------------------------------------------*/
	.faq__block + .faq__block{
		margin-top: 30px;
	}
	.faq__block__ttl{
		padding: 10px 0;
		font-size: 14px;
	}

	/* faq__units
	-----------------------------------------------------------------*/
	.faq__units{
		padding: 0 20px;
	}
	.faq__unit{
		padding: 20px 0;
	}
	.faq__unit dt{
		padding-left: 40px;
		font-size: 12px;
		line-height: 1.6;
	}
	.faq__unit dd{
		padding-top: 0;
		padding-left: 40px;
	}
	.faq__unit dt:before,
	.faq__unit dd:before{
		width: 28px;
		height: 28px;
		font-size: 15px;
		line-height: 28px;
	}

	.faq__unit dd p+p {
		margin-top: 10px;
	}
}