@media screen and (min-width: 561px) {
	.ef-form-group-wrapper {
		position: relative;
	}
	#ef-wrapper .ef-form-group-container .ef-form-group.address-title
	{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 40%;
		justify-content: flex-start !important;
	}

	#ef-wrapper .ef-form-group-container .ef-form-group.address-title dt.ef-form-label {
		width: 100% !important;
	}
}

#ef-wrapper .input-container {
	position: relative; /* 絶対配置の基準にする */
	margin: 50px;      /* デモ用に適当に余白 */
}

/* エラーメッセージの吹き出し */
#ef-wrapper .error-notifier {
	position: absolute;
	bottom: calc(100% + 10px);              /* 入力欄より上側に配置 */
	left: 50%;                 /* 親要素の中央 */
	transform: translateX(-50%); /* 自分の幅の半分だけ左に移動して中央揃え */
	background-color: #FF5F5F;
	color: #FFFFFF;
	padding: 5px !important;
	font-size: 14px !important;
	text-align: center;
	white-space: nowrap;
	/* border-radius: 4px; */ /* 既存のチップと合わせるため消しておく */
	visibility: hidden;        /* 初期は非表示 (JSで制御) */
	cursor: pointer;           /* デザイン次第で手カーソル */
}

/* 吹き出しの矢印 */
#ef-wrapper .error-notifier::after {
	content: "";
	position: absolute;
	left: 50%;                 /* 吹き出しの中央 */
	transform: translateX(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	background-color: #FF5F5F;
	bottom: -5px;             /* 吹き出し本体の下端から少し下にずらす */
}

/* 入力欄の見た目はお好みで */
#ef-wrapper .input-zip {
	padding: 6px;
	font-size: 16px;
	width: 200px;
}

/* 既存の処理で処理でhiddenにされてしまうので、強制的に表示する。既存のEFから切り離せれば不要 */
#street_address_vmessage.wcf-err-line {
	visibility: visible !important;
}
#ef-wrapper #street_address_vmessage.wcf-err-line {
	width: 100% !important;
}

@media screen and (max-width: 560px) {
	#ef-wrapper #street_address_vmessage.wcf-err-line {
		left: 0 !important;
	}

	#ef-wrapper form .ef-form-group-container .ef-form-group.continuous-form-group-style.address-title
	{
		padding: unset !important;
	}
}