:root {
	--color-theme: #a3711f;
}

.tooltip {

	/* ????? */
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;

	/* ????? */
	background: var(--color-theme);
	border-radius: 100%;

	/* * * ?????? * * */
	&::before {

		/* ????? */
		position: absolute;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.6);

		/* ????? */
		content: '?';
		color: white;
		font-size: 100%;
		font-weight: bold;
	}

	/* * * ??? * * */
	.text {

		/* ????? */
		position: absolute;
		display: block;
		width: 14em;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100%;

		/* ????? */
		background: var(--color-theme);
		color: white;
		font-size: 12px;
		padding: 10px;
		line-height: 1.4;
		border-radius: 6px;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		pointer-events: none;

		/* ?????????? */
		transition: all 0.4s ease;
		visibility: hidden;
		opacity: 0;
		bottom: 100%;
		
		/* * * ???????? * * */
		&::after {

			/* ????? */
			position: absolute;
			display: block;
			width: 10px;
			height: 10px;
			left: 50%;
			bottom: -5px;
			transform: rotateZ(45deg) translateX(-50%);
			transform-origin: left;

			/* ????? */
			content: ' ';
			background: var(--color-theme);
		}
	}

	&:hover {
		.text {
			/* ?????????? */
			visibility: visible;
			opacity: 1.0;
			bottom: calc(100% + 10px);

	&:focus {
		.text {
			/* ?????????? */
			visibility: visible;
			opacity: 1.0;
			bottom: calc(100% + 10px);

		}
	}
}