:root{
	--vk-color-border: rgba(0,0,0,.12);
}

$question-color: #e50000;
$answer-color: #337ab7;

@mixin question-bgcolor($color:#fff) {
	background-color: $question-color;
	color: $color !important;
}
@mixin answer-bgcolor($color:#fff) {
	background-color: $answer-color;
	color: $color !important;
}
@mixin question-bordercolor() {
	border: 1px solid $question-color;
	color:$question-color;
}
@mixin answer-bordercolor() {
	border: 1px solid $answer-color;
	color: $answer-color;
}

@mixin vk_faq-common($fweight:bold) {
	border:none;
	padding: 0.8rem 0.8rem 0.8rem 3rem;
	margin: 0;
	position: relative;
	font-weight: $fweight;
	&:before {
		position: absolute;
		left:0;
		top: 0.7rem;
		font-weight: 500;
		font-size:22px;
		line-height: 105%;
		width: 2.1rem;
		height: 2.1rem;
		line-height: 2.1rem;
		text-align: center;
		position: absolute;
		font-family: "Arial", sans-serif;
	}
	p{
		&:first-of-type{
			margin-top:0;
		}
		&:last-child{
			margin-bottom:0;
		}
	}
}

/* style
--------------------------------------------*/
.is-style-vk_faq{
	&-normal{
		.vk_faq_title:before{
			color: $question-color;
		}
		.vk_faq_content:before{
			color: $answer-color;
		}
	}
	&-bgfill-circle,
	&-bgfill-square,
	&-bgfill-rounded{
		.vk_faq_title:before{
			@include question-bgcolor;
		}
		.vk_faq_content:before{
			@include answer-bgcolor;
		}
	}
	&-bgfill-circle,
	&-border-circle{
		.vk_faq_title:before,
		.vk_faq_content:before{
			border-radius: 50%;
		}
	}
	&-bgfill-rounded,
	&-border-rounded{
		.vk_faq_title:before,
		.vk_faq_content:before{
			border-radius: 4px;
		}
	}
	&-border-circle,
	&-border-square,
	&-border-rounded{
		.vk_faq_title:before{
			@include question-bordercolor;
		}
		.vk_faq_content:before{
			@include answer-bordercolor;
		}
	}
}


/*      .qaItem
/*-------------------------------------------*/
.vk_faq { 
	display:block;
	overflow:hidden;
	border-bottom:1px solid var(--vk-color-border);
	padding:0px 0px 1rem; 
	margin: 0 auto 1rem auto;
	width:100%; 
	position: relative;

	.vk_faq_title {	
		@include vk_faq-common();
		font-size:16px;
		border-bottom: 1px dotted var(--vk-color-border);
		&:before { content:"Q";color:#e50000; font-weight: 500; }
		p { 
			line-height: 1.7;
		}
		@media (min-width: 768px) {
			font-size:18px;
		}
	}
	.vk_faq_content {
		@include vk_faq-common(normal);
		transition: .25s;
		&:before { content:"A";color:#337ab7; }

	}
} //.vk_faq 


/*      開閉機能
/*-------------------------------------------*/
.vk_faq{
	&.vk_faq-accordion-close,
	&.vk_faq-accordion-open{
		padding-bottom: 0;
		margin-bottom: 0;
		.vk_faq-body{
			margin-top: 0;
			margin-bottom: 0;
		}
		.vk_faq_title{
			padding-right: 2rem;
			@media (min-width: 768px) {
				padding-right: 2.5rem;
			}
			//矢印共通デザイン
			&::after{
				position: absolute;
				top: 50%;
				right: unset;
				right: 2.5rem;
				content: "";
				width: 8px;
				height: 8px;
				border-right: 1px solid #222;
				border-top: 1px solid #222;
				transition: border-color .3s ease,-webkit-transform .6s ease;
				-webkit-transition: border-color .3s ease,-webkit-transform .6s ease;
				transition: border-color .3s ease,transform .6s ease;
				transition: border-color .3s ease,transform .6s ease,-webkit-transform .6s ease;
			}
		}
	}

	//矢印開閉時の向き
	&.vk_faq-accordion{
		&-close{
			.vk_faq_title{
				border-bottom: none;
			}
			.vk_faq_title::after {
				-webkit-transform: translate(32px, -5px) rotate(135deg);
				transform: translate(32px, -5px) rotate(135deg);

			}
		}
		&-open{

			.vk_faq_title::after {
				-webkit-transform: translate(32px,-2px) rotate(-45deg);
				transform: translate(32px,-2px) rotate(-45deg);
			}

		}
		.vk_faq_title{
			cursor: pointer;
		}
	}

	//アンサーオープン時
	.vk_faq_content-accordion-open{
		height: auto;
		overflow: hidden;
		opacity: 1;
		transition: .25s;
		margin-bottom: 10px;
	}
	//アンサークローズ時
	.vk_faq_content-accordion-close{
		padding-top:0;
		padding-bottom: 0;
		height: 0;
		opacity: 0;
		overflow: hidden;
	}

}