@charset "utf-8";

/*tabの形状*/
.tab-menu{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.tab-menu li a{
	display: block;
	background:#ddd;
	margin:0 2px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab-menu li.active a{
	background:#fff;
}


/*エリアの表示非表示と形状*/
.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;
}

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

/* 追記 */
.area{
	padding: 0;
}

/* スクロールバー */
/* .area::-webkit-scrollbar-thumb {
    background: #EFEAD5;
    border-radius: 2rem;
}

.area::-webkit-scrollbar-track{
    background: #90C7C7;
} */

/* タブメニュー */
.tab-menu li a{
	background:#90C7C7;
}

.tab-menu li.active a{
	background:#90C7C7;
	color: #EFEAD5;
}

.tab-menu li a{
	display: block;
	background:#90C7C7;
	/* padding:3.55rem 0 0.45rem; */
	padding:0 0 0.45rem;
	text-align: left;
  text-justify: inter-ideograph;
  font-size: 1.4rem;
  font-family: neue-haas-grotesk-display, sans-serif;
  margin:0 auto;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #509a9a;
  overflow-wrap: break-word;
  font-feature-settings: "palt";
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 600;
  font-style: normal;
	text-transform:uppercase;
}

.tab-menu li{
		/* width: calc((100vw - 41.6rem) / 12);
		margin-right: 1.6rem; */
		width: calc((100% - 4.8rem) / 4);
		margin-right: 0;
}

/* .tab-menu li.last-tab{
		margin-right: 0;
} */

/* タブレット */
@media only screen and (min-width: 767px) and (max-width: 960px){
	.tab-menu li a{
    padding: 0 0 0.45rem;
}
}

/* スマホ版 */
@media screen and (max-width:480px){
.tab-menu li{
	width: calc((100% - 3.2rem) / 3);
}

.tab-menu li a {
    padding-top: 6.75rem;
}
}