@charset "UTF-8";

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

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

/*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;
  }
}

/*========= Tab内レイアウト ===============*/

/*body {
  background: #fff;
}*/

ul {
  list-style: none;
}

a {
  color: #333;
  text-decoration: none;
}

.wrapper {   /*重複チェック2408*/
  width: 100%;
  max-width: 1050px;
  margin: 50px auto;
  background: #fff;
}
/*================================================================
 exhibition tab area
 =================================================================*/
/*.area h2 {
	padding-bottom: 10px;
	font-size: 2rem;
  font-weight: 500;
	background-image: repeating-linear-gradient(90deg, #b4a983 0, #b4a983 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
	background-size: 4px 4px;
	background-repeat: repeat-x;
	background-position: center bottom;
  line-height: 1.5; /*行間を少し狭く
}*/


.area li {
  padding: 10px;
}