/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
    margin-bottom: 0;
    margin-top: 30px;
}
.tab li a{
	display: block;
    background: #1A2C61;
    padding: 10px 20px;
    border-top: solid 2px #ddd;
    width: 200px;
    text-align: center;
    border-left: solid 2px #b9b8b0;
    color: white;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:#fff;
    color: #1A2C61;
    border-bottom: solid 2px #E9D630;
    font-weight: 600;
}

.tab li a:hover{
    color: #1A2C61;
    background: white;
}

.tab li a.last-bober {
    border-right: solid 2px #b9b8b0;
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
    
}

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

@media screen and (max-width:991.98px) {
    
    .tab {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
 
    .tab li a {
    display: block;
    background: #ddd;
    margin: 5px 0;
    padding: 10px 20px;
    border: solid 2px #ddd;
    width: 100%;
    text-align: center;
}




}

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