@charset "UTF-8";
/* CSS Document */

/*tabの形状*/
.tab {
	display: flex;
	flex-wrap: wrap;
}
.tab li a {
	display: block;
	background:#b8ebf2;
	width: 420px;
	margin: 0 6px;
	padding: 18px 22px 14px;
	border-radius: 8px 8px 0 0;
	text-align: center;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a {
	background:#fff;
	border: 1px solid #666;
	border-bottom: none;
	padding: 18px 20px 10px;
}
.tab li.active span {
	border-bottom: 2px solid #ef0041;
	padding-bottom: 2px;
	display: inline-block;
}
.tabUL {
	border-top: 1px solid #666;
	margin-top: -1px;
}
@media all and (max-width: 896px) {
    .tab li a {
	width: auto;
	margin: 0 3px;
	padding: 14px 2.5em 12px;
	border-radius: 4px 4px 0 0;
}
    
    .tab li.active a {
	padding: 12px 3em 10px;
    }
}
/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding: 50px 0;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@media all and (max-width: 896px) {
    .area {
        padding: 24px 0;
    }
}
@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}