.vk_balloon {
	display: flex;
	align-items: normal;
	margin-bottom: 2.2em;

	figure {
		margin: 0;
	}

	&_content > * {
		color: initial; // カラーパレットのcolorがあたってしまうので初期化する
		&:first-of-type{
			margin-top: 0;
		}
		&:last-of-type{
			margin-bottom: 0;
		}
	}
}

.vk_balloon_icon {
	flex-shrink: 0;
	text-align: center;
	&:not(:empty) {
	flex-basis: 80px;
	}
	&_image:not(.has-text-color) {
		color: #ccc;
	}
	&_image {
		vertical-align: bottom;
		width: 64px;
		height: 64px;
		object-fit: cover;
		display: inline-block;
		&-type {
			&-rounded {
				border-radius: 4px;
			}

			&-circle {
				border-radius: 50%;
			}
		}
	}
	&_name {
		display: block;
		text-align: center;
		font-size: 0.7rem;
		margin-top: 0.3rem;
	}
}

// .vk_balloon_content_outer は .vk_balloon_content の外側に 0.38.2 から追加
// 本来 _outer をつけるような親要素のクラスの方が文字数が多くなる手法はとらないが、
// 既存のクラス名を変更すると既存サイトではHTML構造がもとのままなので崩れてしまうため例外措置。
.vk_balloon_content_outer{
	width:100%;
}
.vk_balloon_content {
	max-width: calc(100% - 6.2em);
	&::after {
		display: block;
		clear: both;
		content: "";
	  }

	.vk_balloon-position-left & {
		float:left;
	}
	.vk_balloon-position-right & {
		float:right;
	}
	&.vk_balloon_content_fullwidth {
		max-width: 100%;
		float: none;
	}
	position: relative;
	text-align: left;
	&.editor-rich-text__tinymce[data-is-placeholder-visible=true] {
		// これがないと未入力時に吹き出しが２重になる
		position: absolute;
	}
}

/*	type
/*-------------------------------------------*/
.vk_balloon_content {
	background: #f5f5f5;
	// padding: 1rem 1.2rem;
	padding: calc( 1rem * 1 ) calc( 1rem * 1.2);
}

.vk_balloon_content_before,
.vk_balloon_content_after {
    position: absolute;
    top: 0;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
}

.vk_balloon-type-speech{
	.vk_balloon_content{
		// border-color: #f5f5f5;
		border-radius: .4em;

		.vk_balloon_content_before,
		.vk_balloon_content_after {
			top: 15px;

		}
		.vk_balloon_content_after {
		    z-index: 1;
			border-right-color: inherit;
		}
		.vk_balloon_content_before{
			z-index: 2;
		}
	}
}
.vk_balloon-type-think{
	.vk_balloon_content{
		border-radius: 1rem;
		.vk_balloon_content_before,
		.vk_balloon_content_after{
			position: absolute;
			content: '';
			border-radius: 50%;
			background: inherit;
		}
		.vk_balloon_content_before{
			width: 14px;
			height: 14px;
		}
		.vk_balloon_content_after{
			width: 10px;
			height: 10px;
		}
	}
}

/*	position
/*-------------------------------------------*/
.vk_balloon-position-left{
	&.vk_balloon-type-speech{
		.vk_balloon_icon{
			margin-right: calc( 1rem * 1.2 );
		}
		.vk_balloon_content{
			.vk_balloon_content_before,
			.vk_balloon_content_after{
				left: -10px;
				border-width: 10px 12px 10px 0;
			}
		}
	}

	&.vk_balloon-type-think{
		.vk_balloon_icon{
			margin-right: calc( 1rem * 1.2 );
		}
		.vk_balloon_content{

			.vk_balloon_content_before{
				left: -18px;
				top: 7px;
			}
			.vk_balloon_content_after {
				left: -25px;
				top: 20px;
			}
		}
	}
}//.vk_balloon-position-left

.vk_balloon-position-right{
	flex-direction: row-reverse;
	&.vk_balloon-type-speech{
		.vk_balloon_icon{
			margin-left: calc( 1rem * 1.2 );
		}
		.vk_balloon_content{
			.vk_balloon_content_before,
			.vk_balloon_content_after{
				right: -10px;
				border-width: 10px 0 10px 12px;

			}
		}
	}

	&.vk_balloon-type-think{
		.vk_balloon_icon{
			margin-left: calc( 1rem * 1.2 );
		}
		.vk_balloon_content{
			.vk_balloon_content_before{
				right: -18px;
				top: 7px;
			}
			.vk_balloon_content_after{
				right: -25px;
				top: 20px;
			}
		}
	}
}//.vk_balloon-position-right


/*	Border
/*-------------------------------------------*/

//Border color
.vk_balloon{
	//位置 左
	&-position-left{
		//タイプ 吹き出し
		&.vk_balloon-type-speech {
			.vk_balloon_content{
				//初期
				.vk_balloon_content_before:not(.has-text-color),
				.vk_balloon_content_after:not(.has-text-color){
					border-color: transparent #f5f5f5 transparent transparent;
				}
				//カラーパレット,カスタムカラー
				.vk_balloon_content_before,
				.vk_balloon_content_after {
					border-color:transparent currentColor transparent transparent;
				}
			}
		}
		//タイプ もくもく
		&.vk_balloon-type-think {
			.vk_balloon_content{
				//初期
				.vk_balloon_content_before:not(.has-text-color),
				.vk_balloon_content_after:not(.has-text-color){
					border-color: transparent;
				}
				//カラーパレット,カスタムカラー
				.vk_balloon_content_before,
				.vk_balloon_content_after {
					border-color:transparent currentColor transparent transparent;
				}
			}
		}
	}
	//位置 右
	&-position-right{
		//タイプ 吹き出し
		&.vk_balloon-type-speech {
			.vk_balloon_content{
				//初期
				.vk_balloon_content_before:not(.has-text-color),
				.vk_balloon_content_after:not(.has-text-color){
					border-color: transparent transparent transparent #f5f5f5;
				}
				//カラーパレット,カスタムカラー
				.vk_balloon_content_before,
				.vk_balloon_content_after {
					border-color:transparent transparent transparent currentColor;
				}
			}
		}
		//タイプ もくもく
		&.vk_balloon-type-think {
			.vk_balloon_content{
				//初期
				.vk_balloon_content_before:not(.has-text-color),
				.vk_balloon_content_after:not(.has-text-color){
					border-color: transparent;
				}
				//カラーパレット,カスタムカラー
				.vk_balloon_content_before,
				.vk_balloon_content_after {
					border-color:transparent currentColor transparent transparent;
				}
			}
		}
	}
}

.vk_balloon{
	&_content,
	&_icon_image {
		&-border-true {
			border-width: var( --vk-balloon-border-width, 1px );
			border-style: solid;
		}
	}
	// デフォルトボーダー
	&_content-border-true:not(.has-text-color) {
		color: #cccccc;
	}
	&-position {
		&-left{ //位置が左
			&.vk_balloon-type-speech {
				.vk_balloon_content-border-true{
					.vk_balloon_content_before{
						left:-10px;
					}
					.vk_balloon_content_after{
						left: var( --vk-balloon-speech-offset, -12px );
						border-right-color: inherit !important;
					}
				}
			}
		}
		&-right{ //位置が右
			&.vk_balloon-type-speech {
				.vk_balloon_content-border-true{
					border-color: currentColor;
					.vk_balloon_content_before {
						right:-10px;
					}
					.vk_balloon_content_after {
						right: var( --vk-balloon-speech-offset, -12px );
						border-left-color: inherit !important;
					}
				}
			}
		}
	}

	&-type-think {
		.vk_balloon_content-border-true{
			.vk_balloon_content_before,
			.vk_balloon_content_after{
				border-width: var( --vk-balloon-border-width, 1px );
				border-style: solid;
				border-color: inherit !important;
			}
		}
	}
}


/*	animation
/*-------------------------------------------*/
.vk_balloon-animation {
	&-trembling {
		animation: trembling 0.1s infinite;
	}
	@keyframes trembling {
		0% {
			transform: rotate(-0.5deg);
		}
		50% {
			transform: rotate(0.5deg);
		}
	}
	&-trembling-x {
		animation: trembling-x 0.1s infinite;
	}
	@keyframes trembling-x {
		0% {
			transform: scale(1, 1);
		}
		50% {
			transform: scale(0.99, 0.96);
		}
	}
	&-pounding {
		animation: pounding 1.5s infinite;
	}
	@keyframes pounding {
		0% {
			transform: scale(1.05)
		}
		5% {
			transform: scale(1)
		}
		95% {
			transform: scale(1)
		}
		100% {
			transform: scale(1.05)
		}
	}

	&-shaking {
		animation: shaking 0.4s infinite;
	}
	@keyframes shaking {
		0% {
			transform: translate(1px, 1px);
		}
		25% {
			transform: translate(1px, -1px);
		}
		50% {
			transform: translate(-1px, -1px);
		}
		75% {
			transform: translate(-1px, 1px);
		}
		100% {
			transform: translate(1px, 1px);
		}
	}
}

.icon-image-list-note:hover{
	cursor: pointer;
}

/*********************
* SmartPhone
0px - 480px
***********************/
@media only screen and (max-width: 480px) {
	.vk_balloon_content{
		max-width: calc(100% - 2em);
		font-size: .9em;
		padding: 1em;
	}
	.vk_balloon-type-think {
		.vk_balloon_content{
			&::after {
				border: 5px solid transparent;
			}
		}
	}

  .vk_balloon{
    align-items: normal;
    &.vk_balloon-position-left{
      &.vk_balloon-type-speech{
      	.vk_balloon_icon{
			margin-right: 1.5rem;
		}//.vk_balloon_icon
        .vk_balloon_conten:not(.vk_balloon_content_fullwidth){
          display: inline-block;
        }//.vk_balloon_content
      }//&.vk_balloon-type-speech

      &.vk_balloon-type-think{
      	.vk_balloon_icon{
			margin-right: 2rem;

		}
		.vk_balloon_content:not(.vk_balloon_content_fullwidth){
			display: inline-block;
        }
      }
    }//&.vk_balloon-position-left

    &.vk_balloon-position-right{
      text-align: right;

			&.vk_balloon-type-speech{
				.vk_balloon_icon{
				  	margin-left: 1.5rem;
				  	margin-right: 0;
				}

				.vk_balloon_content:not(.vk_balloon_content_fullwidth){
				  display: inline-block;

				}
			}//&.vk_balloon-type-speech

			&.vk_balloon-type-think{
				.vk_balloon_icon{
				  margin-left: 2rem;
				  margin-right: 0;
				}

				.vk_balloon_content:not(.vk_balloon_content_fullwidth){
					display: inline-block;
				}
			}//&.vk_balloon-type-think
		}//.vk_balloon-position-right
	}//.vk_balloon

	.vk_balloon_icon{
		max-width:64px;
	}
} // @media only screen and (max-width: 480px) {