:root {
	--vk-color-border-red: #dc3545;
	--vk-color-background-red: #dc3545;
	--vk-color-border-orange: #ffa536;
	--vk-color-background-orange: #ffa536;
	--vk-color-border-blue: #4267b2;
	--vk-color-background-blue: #4267b2;
	--vk-color-border-green: #28a745;
	--vk-color-background-green: #28a745;
	--vk-color-border-black: #222;
	--vk-color-background-black: #222;
}

/*
線色指定
--------------------------------------------*/
.vk_borderBox-color {
	&-red {
		border-color: var(--vk-color-border-red);
		background-color: var(--vk-color-background-red);
	}
	&-orange {
		border-color: var(--vk-color-border-orange);
		background-color: var(--vk-color-background-orange);
	}
	&-blue {
		border-color: var(--vk-color-border-blue);
		background-color: var(--vk-color-background-blue);
	}
	&-green {
		border-color: var(--vk-color-border-green);
		background-color: var(--vk-color-background-green);
	}
	&-black {
		border-color: var(--vk-color-border-black);
		background-color: var(--vk-color-background-black);
	}
}

// 背景色指定
.vk_borderBox-background {
	&-transparent {
		& .vk_borderBox_body {
			background-color: transparent;
		}
		&.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox {
			background-color: transparent;
		}
		&.is-style-vk_borderBox-style-solid-kado-tit-onborder > .vk_borderBox_title_container,
		&.is-style-vk_borderBox-style-solid-kado-tit-inner > .vk_borderBox_title_container,
		&.is-style-vk_borderBox-style-solid-kado-iconFeature >.vk_borderBox_title_container {
			background-color: transparent;
		}
	}
	&-white {
		& .vk_borderBox_body {
			background-color: #fff;
		}
		&.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox {
			background-color:  #fff;
		}
		&.is-style-vk_borderBox-style-solid-kado-tit-onborder > .vk_borderBox_title_container,
		&.is-style-vk_borderBox-style-solid-kado-tit-inner > .vk_borderBox_title_container,
		&.is-style-vk_borderBox-style-solid-kado-iconFeature > .vk_borderBox_title_container {
			background-color: #fff;
		}
	}
}

/*
共通指定
--------------------------------------------*/
.vk_borderBox {
	margin: 0 auto 2em;
	position: relative;
	.vk_borderBox_title_container {
		margin: 0;
		font-size: 1em;
		line-height: 1.4;
		padding: 0.5em 1.5em 0.4em;
		font-weight: bold;
		i:first-child,
		.svg-inline--fa {
			margin-right: 5px;
		}
		.vk_borderBox_title {
			display: inline;
			font-weight: bold;
			font-size: 1em;
			color: inherit; //これがないと見出しデザイン機能に負ける

			/* FortやJPNSTYLEなどデフォルトで装飾指定のあるものの対応 */
			background: none;
			padding: 0;
			border: none;
			outline: none; // 見出しデザインの背景塗りスティッチなど対応
			&::before {
				content: none;
			}
			&::after {
				content: none;
			}
		}
	}
	.vk_borderBox_body {
		padding: 1.5em;
		border-width: 2px;
		border-style: solid;
		@media (min-width: 992px) {
			padding: 1.5em 2em 1.5em;
		}

		& > *:not([class*="alert-"]):not(.has-text-color) {
			// 枠線の色が影響しないようにする
			color: initial;
		}

		// ボックス内要素の最初と最後の要素のmarginを削除
		& > * {
			&:first-child {
				margin-top: 0;
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	// デフォルト色
	&:not([class*="vk_borderBox-color"]){
		&.is-style-vk_borderBox-style-solid-kado-tit-tab,
		&.is-style-vk_borderBox-style-solid-round-tit-tab,
		&.is-style-vk_borderBox-style-solid-kado-tit-banner {
			> .vk_borderBox_title_container:not(.has-background) {
				background-color: #337ab7;
			}
		}

		&:not(.has-text-color) {
			color: #337ab7;
		}
	}
}

/*
装飾指定
--------------------------------------------*/
.vk_borderBox {
	&.is-style-vk_borderBox-style-solid-kado-tit-tab,
	&.is-style-vk_borderBox-style-solid-round-tit-tab {
		> .vk_borderBox_title_container {
			display: inline-block;
		}
	}
	&.is-style-vk_borderBox-style-solid-round-tit-tab {
		>.vk_borderBox_title_container {
			border-radius: 8px 8px 0 0;
		}
		> .vk_borderBox_body {
			border-radius: 0 8px 8px 8px;
		}
	}
	&.is-style-vk_borderBox-style-solid-kado-tit-inner,
	&.is-style-vk_borderBox-style-solid-kado-tit-onborder,
	&.is-style-vk_borderBox-style-solid-kado-iconFeature {
		background-color: transparent;
		border-width: 2px;
		border-style: solid;

		> .vk_borderBox_title_container {
			padding: 1.5em 1.5em 1em;
		}
		> .vk_borderBox_body {
			// background-color: transparent;
			border: none;
			padding-top: 0;
		}
	}
	&.is-style-vk_borderBox-style-solid-kado-iconFeature {
		&.vk_borderBox-color-red,
		&.vk_borderBox-color-orange,
		&.vk_borderBox-color-blue,
		&.vk_borderBox-color-green,
		&.vk_borderBox-color-black {
			.vk_borderBox_title_container {
				&::after {
					content: "";
					position: absolute;
					top: -32%;
					left: 1.5em;
					padding: 1.4em;
					border-radius: 50%;
					border: solid 2px #fff;
				}
				& > .svg-inline--fa,
				& > .fa,
				& > .fab,
				& > .fas,
				& > .far,
				& > .fal,
				& > .fad {
					position: absolute;
					font-size: 1.3em;
					margin-right: 0;
					z-index: 100;
					top: 0%;
					left: 2.3em;
					transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
					color: #FFF;
				}
			}
		}

		> .vk_borderBox_title_container {
			position: relative;
			padding-top: 2.2em;

			> .vk_borderBox_icon_border {
				position: absolute;
				margin-right: 0;
				top: 0;
				left: 3em;
				padding: 1.4em;
				transform: translate(-50%, -50%);
				-webkit-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				border-radius: 50%;
				border: solid 2px #fff;

				& > i {
					position: absolute;
					font-size: 1.3em;
					top: 50%;
					left: 50%;
					-webkit-transform: translateY(-50%) translateX(-50%);
					transform: translateY(-50%) translateX(-50%);
					color: #FFF;
				}

				&:not(.has-background){
					background-color: #337ab7;
				}
			}
		}
	}
	&.is-style-vk_borderBox-style-solid-kado-tit-onborder {
		> .vk_borderBox_title_container {
			position: relative;
			top: -1.2em;
			left: 1em;
			z-index: 1;
			display: inline-block;
			padding: 0.5em 0.5em;
			background: #fff;
		}
	}
}

/*
タイトル部分色指定
--------------------------------------------*/
/* タブ風タイトル　背景色がないパターン */
.vk_borderBox {
	&.is-style-vk_borderBox-style-solid-kado-tit-tab,
	&.is-style-vk_borderBox-style-solid-round-tit-tab,
	&.is-style-vk_borderBox-style-solid-kado-tit-banner {
		border: none;
		background-color: transparent;
	}
}

/* タイトル背景塗り 白文字パターン */
.is-style-vk_borderBox-style-solid-kado-tit-tab,
.is-style-vk_borderBox-style-solid-kado-tit-banner,
.is-style-vk_borderBox-style-solid-round-tit-tab {
	> .vk_borderBox_title_container {
		color: #fff;
	}
	&.vk_borderBox-color-red {
		.vk_borderBox_title_container {
			background-color: var(--vk-color-background-red);
		}
		.vk_borderBox_body {
			border-color: var(--vk-color-border-red);
		}
	}

	&.vk_borderBox-color-orange {
		.vk_borderBox_title_container {
			background-color: var(--vk-color-background-orange);
		}
		.vk_borderBox_body {
			border-color: var(--vk-color-border-orange);
		}
	}
	&.vk_borderBox-color-blue {
		.vk_borderBox_title_container {
			background-color: var(--vk-color-background-blue);
		}
		.vk_borderBox_body {
			border-color: var(--vk-color-border-blue);
		}
	}
	&.vk_borderBox-color-green {
		.vk_borderBox_title_container {
			background-color: var(--vk-color-background-green);
		}
		.vk_borderBox_body {
			border-color: var(--vk-color-border-green);
		}
	}
	&.vk_borderBox-color-black {
		.vk_borderBox_title_container {
			background-color: var(--vk-color-background-black);
		}
		.vk_borderBox_body {
			border-color: var(--vk-color-border-black);
		}
	}
}

/* タイトル文字色のみパターン */
.is-style-vk_borderBox-style-solid-kado-tit-inner,
.is-style-vk_borderBox-style-solid-kado-tit-onborder,
.is-style-vk_borderBox-style-solid-kado-iconFeature {
	&.vk_borderBox-color-red .vk_borderBox_title_container {
		color: var(--vk-color-background-red);
	}
	&.vk_borderBox-color-orange .vk_borderBox_title_container {
		color: var(--vk-color-background-orange);
	}
	&.vk_borderBox-color-blue .vk_borderBox_title_container {
		color: var(--vk-color-background-blue);
	}
	&.vk_borderBox-color-green .vk_borderBox_title_container {
		color: var(--vk-color-background-green);
	}
	&.vk_borderBox-color-black .vk_borderBox_title_container {
		color: var(--vk-color-background-black);
	}
}
/* iconFeatureパターン */
.is-style-vk_borderBox-style-solid-kado-iconFeature {
	&.vk_borderBox-color-red {
		.vk_borderBox_title_container {
			.svg-inline--fa,
			.fas {
				//iconfont
				color: #fff;
			}
			&::after {
				background-color: var(--vk-color-background-red);
			}
		}
	}
	&.vk_borderBox-color-orange {
		.vk_borderBox_title_container {
			.svg-inline--fa,
			.fas {
				//iconfont
				background-color: var(--vk-color-background-orange);
				color: #fff;
			}
			&::after {
				background-color: var(--vk-color-background-orange);
			}
		}
	}
	&.vk_borderBox-color-blue {
		.vk_borderBox_title_container {
			.svg-inline--fa,
			.fas {
				//iconfont
				background-color: var(--vk-color-background-blue);
				color: #fff;
			}
			&::after {
				background-color: var(--vk-color-background-blue);
			}
		}
	}
	&.vk_borderBox-color-green {
		.vk_borderBox_title_container {
			.svg-inline--fa,
			.fas {
				//iconfont
				background-color: var(--vk-color-background-green);
				color: #fff;
			}
			&::after {
				background-color: var(--vk-color-background-green);
			}
		}
	}
	&.vk_borderBox-color-black {
		.vk_borderBox_title_container {
			.svg-inline--fa,
			.fas {
				//iconfont
				background-color: var(--vk-color-background-black);
				color: #fff;
			}
			&::after {
				background-color: var(--vk-color-background-black);
			}
		}
	}
}

.vk_borderBox_body-align {
	&-left {
		display: flex;
		justify-content: left;
	}
	&-center {
		display: flex;
		justify-content: center;
	}
	&-right {
		display: flex;
		justify-content: right;
	}
}