.note-btn{
	appearance:none;
	border:0;
	background:none;
	padding:0;
	margin-left:6px;
	cursor:pointer;
}

.note-btn img{
	width:18px;
	height:18px;
	display:block;
}


/*=========================
 Popover
=========================*/

.note-popover{

	position:fixed;

	width:280px;
	max-width:calc(100vw - 32px);

	background:#fff;

	border:1px solid #d8d8d8;

	border-radius:10px;

	padding:18px;

	box-shadow:0 10px 30px rgba(0,0,0,.18);

	z-index:9999;

	font-size:14px;
	line-height:1.8;

	visibility:hidden;

	opacity:0;

	transform:
			translateY(8px)
			scale(.96);

	transition:
			opacity .18s ease,
			transform .18s ease,
			visibility 0s linear .18s;

}


/* 表示 */

.note-popover.show{

	visibility:visible;

	opacity:1;

	transform:
			translateY(0)
			scale(1);

	transition:
			opacity .18s ease,
			transform .18s ease;

}


/*=========================
 三角
=========================*/

.note-popover::before{

	content:"";

	position:absolute;

	width:14px;
	height:14px;

	background:#fff;

	border-left:1px solid #d8d8d8;
	border-top:1px solid #d8d8d8;

	transform:rotate(45deg);

	top:-8px;

	left:var(--arrow-left,40px);

}


/* 下側表示用 */

.note-popover.arrow-bottom::before{

	top:auto;
	bottom:-8px;

	border-left:none;
	border-top:none;

	border-right:1px solid #d8d8d8;
	border-bottom:1px solid #d8d8d8;

}


/*=========================
 閉じる
=========================*/

.note-close{

	position:absolute;

	top:6px;
	right:10px;

	border:0;

	background:none;

	font-size:22px;

	color:#777;

	cursor:pointer;

}

.note-content{

	padding-right:20px;

}