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

/*------------------------------------------------------

	caseInner

------------------------------------------------------*/
.caseInner { transition: background 0.3s; margin-bottom: 0; background-color: #fff; }
.caseInner .question { border-bottom: 1px solid #ccc; position: relative; cursor: pointer; background-color: #fff; font-weight: bold; margin-bottom: 0;}
.caseInner .question::before { content: 'Q'; font-family: 'Noto Sans JP', sans-serif; color: #fff; width: 32px; height: 32px; background-color: #4F9F66; position: absolute; line-height: 1.2; text-align: center; border-radius: 4px;}
.caseInner .question .btn { width: 20px; height: 20px; background-color: #ABD068; position: absolute; right: 10px; top: 20px; }
.caseInner .question .btn span { position: absolute; width: 12px; height: 2px; background-color: #fff; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.caseInner .question .btn span:nth-of-type(2) { -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.caseInner .answer { position: relative; background-color: #fff; border-radius: 6px; margin-left: 40px; margin-right: 40px; padding: 15px 15px 15px 60px; display: none; margin-top: 20px;}
.caseInner .answer a{ text-decoration: underline; }
.caseInner .answer a:hover{ text-decoration: none; }
.caseInner .answer::before { content: 'A'; font-family: 'Noto Sans JP', sans-serif; color: #399052; position: absolute; line-height: 1.2; width: 32px; height: 32px; background-color: #FCEE21; text-align: center; border-radius: 4px;}
.caseInner .answer p:last-of-type { margin-bottom: 0; }

.caseInner.active { background-color: #E6F3D2; padding-bottom: 20px; border-bottom: 1px solid #fff;}
.caseInner.active .question { border-bottom-color: transparent; /*color: #fff;*/ background-color: #fff; }
.caseInner.active .question::before { color: #fff;}
.caseInner.active .question .btn { }
.caseInner.active .question .btn span { background-color: #E6F3D2; }
.caseInner.active .question .btn span:nth-of-type(2) { display: none; }
.caseInner.active .answer {}



@media (min-width: 768px) {
	.contentsInner { margin-bottom: 300px;}
	.caseInner {}
	.caseInner .question { font-size: 1.8rem; padding: 15px 30px 14px 60px;}
	.caseInner .question::before { font-size: 2.2rem; left: 10px; top: 13px; }
	.caseInner .question .btn {}
	.caseInner .question .btn span {}
	.caseInner .answer { font-size: 1.8rem; line-height: 1.8; }
	.caseInner .answer::before { font-size: 2.2rem; left: 16px; top: 18px;}
}

@media (max-width: 767px) {
	.contentsInner { margin-bottom: 150px;}
	.caseInner {}
	.caseInner .question { font-size: 1.8rem; padding: 15px 40px 15px 55px;}
	.caseInner .question::before { font-size: 2.4rem; left: 10px; top: 13px;}
	.caseInner .question .btn { top: 18px;}
	.caseInner .question .btn span {}
	.caseInner .answer { font-size: 1.6rem; line-height: 2; margin-left: 10px; margin-right: 10px; padding: 15px 10px 15px 60px; }
	.caseInner .answer::before { font-size: 2.4rem; left: 10px; top: 15px;}
	.caseInner .answer ul { margin-left: 0; }
}




/*------------------------------------------------------



------------------------------------------------------*/



@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


/*------------------------------------------------------



------------------------------------------------------*/



@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


/*------------------------------------------------------



------------------------------------------------------*/



@media (min-width: 768px) {

}

@media (max-width: 767px) {

}