@charset "utf-8";
/* CSS Document */
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
	
}

li {
    margin-bottom: 0;
}

/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	font-size:0;
}


.tab li a{
	display: block;
	/*background:#ddd;*/
	margin:0;
	/*padding:10px 20px;*/
}
/*liにactiveクラスがついた時の形状*/
.tab li .active a{
	/*background:#fff;*/
	}

.tab li img{
	max-width:100%; 
}


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

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

#tab-yellow{
	background: #fff6cf;
	border: solid 7px #ffcc00;
	border-radius: 25px;
}

#tab-green{
	background: #d5efe5;
	border: solid 7px #83cab8;
	border-radius: 25px;
}

#tab-pink{
	background: #ffdee5;
	border: solid 7px #f4abb8;
	border-radius: 25px;
}

.tab-animal01{
	position: absolute;
    top: calc(((100vw - 375px) / -77.25) + -50px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);	
}

.tab-animal02{
	position: absolute;
    top: calc(((100vw - 375px) / -386.25) + -66px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);	
}

.tab-animal03{
	position: absolute;
    top: calc(((100vw - 375px) / -46.8182) + -37px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);	
}



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

@media screen and (max-width: 768px){
	.tab{
		justify-content: center;
		gap: 1px;
	}

	ul.tab li{
		width: 32%;
	}

	#tab-yellow{
		border-radius: 5px;
	}
	#tab-green{
		border-radius: 5px;
	}
	#tab-pink{
		border-radius: 5px;
	}
}