/* Site Share Buttons
 * テーマ側の a / button / ul の装飾に左右されないよう、主要なプロパティは !important で固定しています。
 */
.ssbtn {
	--ssbtn-size: 40px;
	margin: 0 0 2em;
}

.ssbtn .ssbtn__heading {
	margin: 0 0 .5em;
	font-size: .875em;
	font-weight: 700;
}

.ssbtn .ssbtn__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0 !important;
	list-style: none !important;
}

.ssbtn.ssbtn--align-center { text-align: center; }
.ssbtn.ssbtn--align-center .ssbtn__list { justify-content: center; }
.ssbtn.ssbtn--align-right { text-align: right; }
.ssbtn.ssbtn--align-right .ssbtn__list { justify-content: flex-end; }

.ssbtn .ssbtn__item {
	display: flex;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ssbtn .ssbtn__item::before,
.ssbtn .ssbtn__item::after,
.ssbtn .ssbtn__item::marker {
	content: none !important;
	display: none !important;
}

.ssbtn .ssbtn__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	width: var(--ssbtn-size) !important;
	min-width: 0 !important;
	height: var(--ssbtn-size) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--ssbtn-color, #555) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit;
	font-size: calc(var(--ssbtn-size) * .45) !important;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1 !important;
	text-decoration: none !important;
	text-transform: none !important;
	vertical-align: top;
	cursor: pointer;
	transition: opacity .2s;
}

.ssbtn.ssbtn--rounded .ssbtn__btn { border-radius: calc(var(--ssbtn-size) * .2) !important; }
.ssbtn.ssbtn--square .ssbtn__btn { border-radius: 0 !important; }
.ssbtn.ssbtn--mono .ssbtn__btn { background: var(--ssbtn-mono, #333) !important; }

.ssbtn .ssbtn__btn:hover {
	opacity: .75;
}

.ssbtn .ssbtn__btn:focus {
	outline: none;
}

.ssbtn .ssbtn__btn:focus-visible {
	outline: 2px solid var(--ssbtn-color, #555) !important;
	outline-offset: 2px;
}

.ssbtn.ssbtn--mono .ssbtn__btn:focus-visible {
	outline-color: var(--ssbtn-mono, #333) !important;
}

.ssbtn .ssbtn__btn > i,
.ssbtn .ssbtn__btn > span,
.ssbtn .ssbtn__btn > svg {
	pointer-events: none;
}

.ssbtn .ssbtn__text-icon {
	font-family: Verdana, Arial, sans-serif;
	font-size: .9em;
	font-weight: 700;
	letter-spacing: -.02em;
}

/* URLコピー完了の表示 */
.ssbtn-toast {
	position: fixed;
	left: 50%;
	bottom: var(--ssbtn-toast-bottom, 24px);
	z-index: 10000;
	padding: .6em 1.2em;
	border-radius: 4px;
	background: rgba(0, 0, 0, .8);
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 10px);
	transition: opacity .3s, transform .3s;
}

.ssbtn-toast.is-show {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media print {
	.ssbtn,
	.ssbtn-toast {
		display: none !important;
	}
}