@charset "UTF-8";

/* ▼▼▼ よくあるご質問
====================================================== */

.page_title h1::after{
	background-image: url(../img/faq/titlebg.png);
}

/* faq_list
---------------------------------------- */
dl.faq_list dt,
dl.faq_list dd{
	width: calc(100% - 100px);
	padding: 40px 40px 40px 50px;
	position: relative;
	z-index: 1;
	font-size: 18px;
}
dl.faq_list dt{
	margin: 0 auto;
	font-weight: bold;
}
dl.faq_list dt::after{
	content: "";
	background: #EFF1F2;
	width: 100%;
	height: calc(100% + 30px);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
dl.faq_list dd{
	background: #fff;
	border: 2px solid #EFF1F2;
	margin-left: auto;
	color: #222;
}
dl.faq_list dd:not(:last-of-type){
	margin-bottom: 40px;
}
dl.faq_list dt span,
dl.faq_list dd span.answer{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 70px;
	height: 70px;
	color: #fff;
	font-size: 40px;
	font-family: 'Barlow Semi Condensed', sans-serif;
	position: absolute;
	top: 20px;
}
dl.faq_list dt span{
	background: #B8D200;
	left: -50px;
}
dl.faq_list dd span.answer{
	background: #454748;
	left: -70px;
}
dl.faq_list dt span::after,
dl.faq_list dd span.answer::after{
	content: "";
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
}
dl.faq_list dt span::after{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent #B8D200;
	right: -8px;
}
dl.faq_list dd span.answer::after{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 8px 8px 0;
	border-color: transparent #fff transparent transparent;
	right: 0;
}

/* ▼▼▼ 768px
====================================================== */
@media screen and (max-width: 768px) {

	/* faq_list
	---------------------------------------- */
	dl.faq_list dt,
	dl.faq_list dd{
		width: calc(100% - 35px);
		padding: 15px 20px;
		position: relative;
		z-index: 1;
		font-size: 16px;
	}
	dl.faq_list dt{
		margin: 0 auto;
		font-weight: bold;
		padding-left: 40px;
	}
	dl.faq_list dt::after{
		height: calc(100% + 25px);
		z-index: -1;
	}
	dl.faq_list dd{
	}
	dl.faq_list dd:not(:last-of-type){
		margin-bottom: 35px;
	}
	dl.faq_list dt span,
	dl.faq_list dd span.answer{
		width: 30px;
		height: 30px;
		font-size: 20px;
		top: 12px;
	}
	dl.faq_list dt span{
		left: -19px;
	}
	dl.faq_list dd span.answer{
		left: -30px;
	}
	dl.faq_list dt span::after,
	dl.faq_list dd span.answer::after{
		content: "";
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
	}
	dl.faq_list dt span::after{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 4px 0 4px 4px;
		border-color: transparent transparent transparent #B8D200;
		right: -4px;
	}
	dl.faq_list dd span.answer::after{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5px 4px 4px 0;
		border-color: transparent #fff transparent transparent;
		right: 0;
	}
}