@charset "utf-8";
.sns li {
		position: relative;
		height: 40px;
		display: flex;
		align-items: center;
}
.sns li .sns_notes {
		font-size: 10px;
		width: 60px;
		height: 40px;
		background: #3D3A39;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
		text-align: center;
		position: absolute;
		top: 50px;
		left: -10px;
		font-weight: 500;
		opacity: 0;
		transition: opacity 0.3s;
}
.sns li .sns_notes::after {
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		background: #3D3A39;
		transform: rotate(45deg);
		position: absolute;
		left: calc(50% - 5px);
		top: -5px;
}
.sns li:active .sns_notes {
		opacity: 1;
}
.sns li:hover .sns_notes {
		opacity: 1;
}
@media(max-width: 1023px) {
		.profile_data {
				margin-right: 20px;
		}
		.sns li {
				margin: 0 12px
		}
		.sns li .sns_notes {
				font-size: 9px;
				width: 50px;
				height: 36px;
				background: #3D3A39;
				color: #fff;
				top: 40px;
				left: -7px;
				line-height: 1.2;
		}
		.sns li .sns_notes::after {
				background: #3D3A39;
		}
}
@media(max-width: 840px) {
		.profile_data {
				margin-right: 20px;
				margin-left: 0;
				min-width: calc(80vw - 20px);
		}
		.sns {
				display: flex;
				justify-content: flex-start;
		}
		.sns li {
				margin: 0 24px 0 0;
		}
		.sns li .sns_notes {
				left: -10px;
		}
}
@media(max-width: 768px) {
		.sns li {
				width: 32px !important;
				margin: 0 16px 0 0;
		}
		.sns li:last-child {
				margin-right: 0;
		}
		.sns li .sns_notes {
				width: 42px;
				top: 42px;
				left: -5px;
				opacity: 1;
				animation: snsFadeOut 0.3s linear forwards;
				animation-delay: 4s;
		}
		.sns.grid8 {
				display: flex;
				flex-wrap: wrap;
				max-width: 260px;
		}
		.sns.grid8 li {
				margin: 0 16px 12px 0 !important
		}
}
@keyframes snsFadeOut {
		0% {
				opacity: 1;
		}
		100% {
				opacity: 0;
		}
}