body {
	background-color: #333333;
	color: #eeeeee;
	font-size: 16px;
}

#textarea_wrap {
	width: 50%;
	min-width: 400px;
}

#textarea_wrap textarea {
	width: 100%;
	height: 10em;
	font-size: 1em;
	white-space: pre-wrap;
	background-color: #333;
	color: #fff;
	border: 1px solid #999;
}

button {
	width: 5em;
	height: 1.5em;
	font-size: 1.2em;
}

.var {
	width: 5em;
	height: 1.5em;
	font-size: 1em;
	font-family: sans-serif;
	color: #55f;
	text-align: center;
	margin: 1em 1em 0 0;
	background-color: #ccc;
	border-radius: 5px;
}

.flexarea {
	display: flex;
}

.invisi {
	display: none;
}

.kaeru {
	position: fixed;
	top: 0;
	right: -100px;
	width: 100px;
}
p{
	line-height: 2em;
}
#ruby_exp_btn{
	text-decoration:underline;
}
/* アニメーションを定義 */
@keyframes entrance-and-exit {
	0% {
		right: -100px;
		/* 開始時：画面の右外 */
	}

	10% {
		right: 0px;
		/* 10%の時点で画面内に移動 */
	}

	90% {
		right: 0px;

		/* 90%の時点まで画面内に待機 */
	}
	100% {
		right: -100px;
		/* 終了時：画面の右外に戻る */
	}
}

	/* アニメーションを適用するクラス */
	.is-animated {
		animation: entrance-and-exit 1s forwards;
	}

	@media screen and (max-width: 480px) {
		#textarea_wrap {
			width: 90vw;
			margin-left: 0;
			padding: 0;
		}

		#textarea_wrap textarea {
			width: 90%;
			height: 25vh;
		}

/*		:popover-open {
			top: 1em;
			left: 50%;
		}
*/
		#tag {
			position: fixed;
			top: 0;
			right: -100px;
			width: 100px;
		}

		/* アニメーションを定義 */
		@keyframes entrance-and-exit {
			0% {
				right: -100px;
				/* 開始時：画面の右外 */
			}

			10% {
				right: 0px;
				/* 30%の時点で画面内に移動 */
			}

			90% {
				right: 0px;
				/* 70%の時点まで画面内に待機 */
			}

			100% {
				right: -100px;
				/* 終了時：画面の右外に戻る */
			}
		}

		/* アニメーションを適用するクラス */
		.is-animated {
			animation: entrance-and-exit 1s forwards;
		}

	}