@charset "UTF-8";
/*
タブメニュー
引用元：
https://coco-factory.jp/ugokuweb/move01/5-4-1/
*/
/*tabの形状*/
.tab {
 display: flex;
 flex-wrap: wrap;
}
.tab li a {
 display: block;
 /*background:#ddd;
  margin:0 2px;
  padding:10px 20px;*/
}
/*liにactiveクラスがついた時の形状*/
.tab 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;
 }
}
/*========= レイアウトのためのCSS ===============*/
body {
 /*background:#eee;*/
}
ul {
 list-style: none;
}
a {
 /*color:#333;
  text-decoration: none;*/
}
.wrapper {
 /*width:100%;
  max-width: 960px;
  margin:30px auto;
    background:#fefefe;*/
}
.area h2 {
 /*font-size:1.3rem;
  margin:0 0 20px 10px;*/
}
.area li {
 /*padding: 10px; 
  border-bottom: 1px solid #ddd;*/
}