/**
	言語ごとのサンプルをタブ分けするCSS
	<style>
	</style>
 */

/*input要素は非表示*/
input {
	display: none;
}
/*タブエリアの設定*/
.tab_area {
	display: flex;
	flex-wrap: wrap;
}
/*タブボタン部分*/
label {
	display: block;
	padding: 0.5em 1em;
	margin-right: 2px;
	border-radius: 10px 10px 0 0;
	background: #a7a7a7;
	float: left;
	cursor: pointer;
	order: -1;
}
/*コンテンツ部分*/
.content {
	display: none;
	width: 100%;
	padding: 1em;
	background: #dfdedf;
}
.inner {
	opacity: 0;
	overflow-y: scroll;
	max-height: 600px;
}

/*タブを選択したとき*/
input:checked + .btn_tab {
	background: #dfdedf;
}
input:checked + .btn_tab + .content {
	display: block;
}
/*コンテンツをフェイドインするアニメーション*/
input:checked + .btn_tab + .content .inner {
	animation: fadeIn 1.5s forwards;
}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% { opacity: 1;}
}