.qnr-gate {
	max-width: 560px;
	margin: 0 auto;
}

.qnr-gate__lead {
	margin-bottom: 24px;
	line-height: 1.75;
}

.qnr-gate__btn {
	display: flex;
	justify-content: center;
	margin: 24px 0;
	min-height: 44px;
}

/*
 * Google Identity Services のログインボタンは iframe 内に outline 枠線を描画する。
 * テーマ側の `iframe { max-width: 100% }` 等により iframe が本来幅（GISが要求する
 * 300px = ボタン280px + 左右のにじみ margin -10px）より狭く描画されると、
 * iframe の overflow:clip によって右側の枠線が切れてしまう。
 * GIS が想定する幅を明示的に確保して枠線が四辺そろって表示されるようにする。
 */
.qnr-gate__btn iframe {
	width: 300px !important;
	max-width: none !important;
}

.qnr-gate__status {
	text-align: center;
	font-size: 0.9em;
	min-height: 1.5em;
}

.qnr-gate__status.is-error {
	color: #b32d2e;
}

.qnr-gate__notice {
	background: #f7f4ef;
	border: 1px solid #e6e2d8;
	border-radius: 8px;
	padding: 20px 24px;
	line-height: 1.75;
}

.qnr-gate__notice--error {
	background: #fce8e8;
	border-color: #e5b8b8;
	color: #8b2e2e;
}

.qnr-gate__signed-in {
	font-size: 0.9em;
	background: #e8f1ec;
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 20px;
}

.qnr-gate__logout {
	margin-top: 16px;
	font-size: 0.9em;
	text-align: center;
}