/*tabの形状*/
.tab{
	display: flex;
    justify-content: space-between;
    border-bottom:  1px solid #F3EDE7;
}

.tab li {
    width: 49%;
    padding: 20px;
    border-top: 1px solid #F3EDE7;
    border-left: 1px solid #F3EDE7;
    border-right: 1px solid #F3EDE7;
    border-top-right-radius:  8px;
    border-top-left-radius: 8px;
    background-color: #F3EDE7;
}
.tab li a{
	display: block;
	background:#F3EDE7;
	margin:0 2px;
    text-align: center;
    background-color: #F3EDE7;
    color: #231915;
    font-size: 1.8rem;
    font-weight: 700;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active{
    background-color:#231915;
    margin-bottom: -1.6px;
}
.tab li.active a{
	background-color:#231915;
    color: #F3EDE7;
}


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

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    position: relative;
    z-index: 99;
    background: transparent;
}

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



@media screen and (max-width:1080px) {
    .tab li {
        padding: 9px;
    }
    .tab li a{
        font-size: 1.5rem;
    }
}