/*tabの形状*/
.tab {
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.tab li {
	list-style: none;
	padding-bottom: 1vw;
	font-size: 0.8em;
	border-bottom: solid 1px #ccc;
	width: 20%;
	text-align: center;
}
.tab li a {
	display: block;
	margin:0 2px;
	text-decoration: none;
	color: #AAA;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active {
	border-bottom: solid 4px #333;
}
.tab li.active a {
	color: #111;
/*	background:#fff;*/
}


/*エリアの表示非表示と形状*/
.area {
	padding: 5vw 10vw;
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	margin-bottom: 24vw;
/*	background: #444;*/
/*	padding:50px 20px;*/
}
.title {
	font-family: 'Shippori Mincho', serif;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}