/* 7.css Balloon (scoped) */

/* スコープ: .is-style-7css-balloon に限定して変数を定義 */
.is-style-7css-balloon {
	--w7-el-bdr: 3px;
	--w7-el-bg-s-1: #ebebeb;
	--w7-bl-bd: #0006;
	--w7-blt-size: 18px;
	--w7-blt-offset: 1em;
}

/* 本体 */
.is-style-7css-balloon {
	background: linear-gradient(to bottom, #fff, var(--w7-el-bg-s-1));
	border: 1px solid var(--w7-bl-bd);
	border-radius: var(--w7-el-bdr);
	box-shadow: 5px 5px 3px -3px var(--w7-bl-bd);
	padding: 1em 1em 1em 2.5em;
	position: relative;
}

.is-style-7css-balloon:before {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23fff' stroke='%23fff'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%23939393'/%3E%3C/svg%3E");
	content: "";
	height: var(--w7-blt-size);
	left: var(--w7-blt-offset);
	position: absolute;
	top: calc(var(--w7-blt-size) * -1);
	width: var(--w7-blt-size);
}

/* 方向バリエーション */
.is-style-7css-balloon.is-top:before {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23ebebeb' stroke='%23ddd'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%23939393'/%3E%3C/svg%3E");
	bottom: calc(var(--w7-blt-size) * -1);
	top: unset;
	transform: scale(-1);
}

.is-style-7css-balloon.is-top.is-right:before {
	transform: scaleY(-1);
}

.is-style-7css-balloon.is-left:before {
	left: unset;
	right: var(--w7-blt-offset);
}

.is-style-7css-balloon.is-left.is-bottom:before {
	transform: scaleX(-1);
}

/* 余白調整（矢印のための余白） */
.is-style-7css-balloon.is-left,
.is-style-7css-balloon.is-left.is-bottom {
	padding-right: 2.5em;
}