header {
	grid-area: header;
	text-align: center;
	color: darkcyan;
	background-color: #e0e0e0;
	text-shadow: 1px 3px 3px #888888;
}
footer {
	grid-area: footer;
	text-align: center;
	color: #ffff40;
	background-color: #808080;
}
footer hr {
	border-width: 0 0 1px;
	border-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 100%) 0 0 100%;
	border-style: solid;
}

a {
	color: #888888;
	text-decoration: none;
}
a:hover {
	color: #eeff00;
	background-color: #cccccc;
}

.horizontal-center {
	display: grid;
	justify-items: center;
	align-content: start;
}

.emoji {
	font-weight: 400;
	font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

/*== ボタン共通設定 */
.btn {
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	border: 1px solid #555; /* ボーダーの色と太さ */
	padding: 2px 10px;
	text-align: center;
	outline: none;
	/*アニメーションの指定*/
	transition: ease 0.2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color: #333;
}

.btn:hover span {
	color: #fff;
}

.btn::before {
	content: "";
	/*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	/*色や形状*/
	background: #333; /*背景色*/
	width: 100%;
	height: 100%;
	/*アニメーション*/
	transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
}
.btn:hover::before {
	transform: scale(1, 1);
}

/*== 背景が流れる（左から右） */
.bgleft:before {
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before {
	transform-origin: left top;
}

/*== 背景が流れる（右から左） */
.bgright:before {
	transform-origin: left top;
}

/*hoverした際の形状*/
.bgright:hover:before {
	transform-origin: right top;
}

/*== 背景が流れる（中央から外） */
.bgcenterout:before {
	transform: scale(0, 0);
	transform-origin: center;
}