/*tabの形状*/
.tab {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding: 0;
    margin-top: 30px;
}
.tab li a{
	display: block;
    background: #ececec;
    margin: 0 2px;
    padding: 10px 20px;
    text-decoration: none;
    color: #333333;
    font-size: 1.6rem;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background: #46b501;
    color: white;
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
    border: 1px solid #ddd;
}

/*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;
	}
}


@media only screen and (max-width: 480px) {
.tab li a{
    font-size: 12px;
}
}




#lineup03 .area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 0;
    border: 1px solid #ddd;
}

#lineup03 .area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}