@charset "UTF-8";

/* ショートコード */

/* Tooltipster. */
.tooltipster-st-rb {
	pointer-events: auto;
}

.tooltipster-st-rb.tooltipster-sidetip .tooltipster-box {
	border: 3px solid #bdbdbd;
	border-radius: 5px;
	background: #fff;
}

.tooltipster-st-rb.tooltipster-top .tooltipster-box,
.tooltipster-st-rb.tooltipster-bottom .tooltipster-box {
	margin-right: 10px;
	margin-left: 10px;
}

.tooltipster-st-rb.tooltipster-top .tooltipster-box {
	margin-top: 8px;
}

.tooltipster-st-rb.tooltipster-right .tooltipster-box {
	margin-top: 8px;
	margin-right: 10px;
}

.tooltipster-st-rb.tooltipster-left .tooltipster-box {
	margin-top: 8px;
	margin-left: 10px;
}

.tooltipster-st-rb.tooltipster-sidetip .tooltipster-content {
	padding: 1.10294em;
	color: #000;
	font-size: .85em;
}

.tooltipster-st-rb.tooltipster-sidetip .tooltipster-content > :first-child {
	margin-top: 0;
}

.tooltipster-st-rb.tooltipster-sidetip .tooltipster-content > :last-child {
	margin-bottom: 0;
}

.tooltipster-st-rb.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
	top: 4px;
	left: 0;
	border-bottom-color: #fff;
}

.tooltipster-st-rb.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
	top: 0;
	left: -4px;
	border-left-color: #fff;
}

.tooltipster-st-rb.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
	top: 0;
	left: 4px;
	border-right-color: #fff;
}

.tooltipster-st-rb.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
	top: -4px;
	left: 0;
	border-top-color: #fff;
}

.tooltipster-st-rb.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
	height: 11px;
}

.tooltipster-st-rb.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
	border-bottom-color: #bdbdbd;
}

.tooltipster-st-rb.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
	border-left-color: #bdbdbd;
}

.tooltipster-st-rb.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
	border-right-color: #bdbdbd;
}

.tooltipster-st-rb.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
	border-top-color: #bdbdbd;
}

.tooltipster-st-rb.tooltipster-sidetip .tooltipster-close {
	position: absolute;
	top: calc(8px - .5em - 1.5px);    /* margin-{top,botom} - .5em - (border-width / 2) */
	right: calc(10px + .5em);    /* margin-{right,left} + .5em */
	display: flex;
	padding: .25em;
	width: 1em;
	height: 1em;
	border: 0;
	border-radius: 100%;
	background: #bdbdbd;
	color: #fff;
	font-weight: bold;
	font-family: Arial, sans-serif;
	line-height: 1;
	-webkit-appearance: none;
	justify-content: center;
	align-items: center;
}

.tooltipster-st-rb.tooltipster-sidetip .tooltipster-close:hover {
	cursor: pointer;
}

/* Reactions. */
/* Reaction Buttons > HTML (before). */
.st-rb__before {
	text-align: center;
}

/* Reaction Buttons > Button. */
.st-rb-button,
.st-rb-button::before,
.st-rb-button::after {
	box-sizing: border-box;
}

.st-rb-button *,
.st-rb-button *::before,
.st-rb-button *::after {
	box-sizing: inherit;
}

.st-rb-button {
	border: 3px solid #ccc;
	border-radius: 100%;
	background: #fff;
	color: #bdbdbd;
	font-size: 1em;
	-webkit-appearance: none;
}

.st-rb-button.has-text {
	padding: 0 .5em 0 0;
	border-radius: 5px;
}

.st-rb-button:focus {
	outline: 0;
}

.st-rb-button:hover {
	border-color: #bdbdbd;
	background: #bdbdbd;
	color: #fff;
	cursor: pointer;
}

.st-rb-button:disabled {
	pointer-events: none;
}

.st-rb-button__content {
	display: flex;
	justify-content: center;
	align-items: center;
}

.st-rb-button__icon {
	display: flex;
	padding: .5em;
	width: 2em;
	height: 2em;
	flex-shrink: 0;
	flex-grow: 0;
	justify-content: center;
	align-items: center;
}

.st-rb-button__label {
	font-size: .75em;
}

/* Reaction Buttons > Reaction. */
.st-rb-reaction {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.st-rb-reaction__button {
	flex-shrink: 0;
	flex-grow: 0;
}

.st-rb-reaction.is-reacted .st-rb-reaction__button {
	border-color: #bdbdbd;
	background: #bdbdbd;
	color: #fff;
}

.st-rb-reaction--good .st-rb-reaction__button:hover,
.st-rb-reaction--good.is-reacted .st-rb-reaction__button {
	border-color: #29b6f6;
	background: #29b6f6;
	color: #fff;
}

.st-rb-reaction--bad .st-rb-reaction__button:hover,
.st-rb-reaction--bad.is-reacted .st-rb-reaction__button {
	border-color: #ef5350;
	background: #ef5350;
	color: #fff;
}

.st-rb-reaction--custom .st-rb-reaction__button:hover,
.st-rb-reaction--custom.is-reacted .st-rb-reaction__button {
	border-color: #f79800;
	background: #f79800;
	color: #fff;
}


.st-rb-reaction__count {
	margin: .5em 0 0;
	color: #bdbdbd;
	font-size: .65em;
}

/* Reaction Buttons > Reactions. */
.st-rb-reactions {
	display: flex;
	justify-content: center;
	align-items: center;
}

.st-rb-reactions__reaction {
	margin: 0 .25em;
}

@media (min-width: 960px) {
	.st-rb-reactions__reaction {
		margin: 0 .125em;
	}
}

/* Reaction Buttons > Component. */
.st-rb {
	margin: 15px 0;
	font-size: 20px;
}

.post .st-rb {
	margin: 30px 0;
}

/* stylelint-disable declaration-block-no-duplicate-properties */
@media screen and (orientation: landscape) { /* 横向きの場合のスタイル */
	/* iPhoneX */
	.st-rb {
		margin-bottom: calc(constant(safe-area-inset-bottom) + 10px );
    	margin-bottom: calc(env(safe-area-inset-bottom) + 10px );
	}
}

@media screen and (orientation: portrait) { /* 縦向きの場合のスタイル */
	/* iPhoneX */
	.st-rb {
		margin-bottom: calc(constant(safe-area-inset-bottom) + 10px );
    	margin-bottom: calc(env(safe-area-inset-bottom) + 10px );
	}
}