@charset "UTF-8";
/* タブ表示用css */

.tab{
	display: flex;
	flex-wrap: nowrap;
}
.tab li{
	border-bottom: solid 2px #156082;
}
.tab li.active{
	border-bottom: none;
}
.tab li a{
	font-weight: bold;
	display: block;
	width: 98%;
	background: #90a4ad;
	color: #fff;
	margin: 0 auto;
	padding: 10px 20px;
	text-align: center;
	box-shadow: inset 0px -4px 6px 4px rgba(0, 0, 0, 0.14);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 15px 0 10px;
}
.tab li.active > a{
	width: 100%;
	background: #edf7fc;
	color: #156082;
	text-align: center;
	border-top: solid 2px #156082;
	border-left: solid 2px #156082;
	border-right: solid 2px #156082;
	border-bottom: none;
	box-shadow:none;
}
.tab li a:hover{
	background: #3c738c;
}
.tab li.active a:hover{
	background: #edf7fc;
}
.tab.tab_nowrap li{
	flex-wrap: nowrap;
	flex-grow: 1;
	display: flex;
}
.tab.tab_nowrap li{
	display: flex;
}
.area {
	display: none;
	opacity: 0;
	padding:50px 20px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.area.is-active {
	display: block;
	animation-name: displayAnime;
	animation-fill-mode: forwards;
	border-bottom: solid 2px #156082;
	border-left: solid 2px #156082;
	border-right: solid 2px #156082;
	background: #edf7fc;
	padding: 30px 30px 0;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.p30{
	padding: 30px;
}