@charset "UTF-8";

/*tabの形状*/
.tab{
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

.tab li a{
  display: block;
  background:#ddd;
  width:140px;
  height:140px;
  border-radius: 50%;
  margin: 50 15 15 15px ;
  font-weight: 600;
  font-size: 0.82em;
  text-align: center;
  text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
  -2px 2px 0 #FFF, 2px -2px 0 #FFF,
  0px 2px 0 #FFF,  0-2px 0 #FFF,
  -2px 0 0 #FFF, 2px 0 0 #FFF;
  
  
}
#lunchicon{background-image: url(../img/a2.png);
            background-position: center;
          background-repeat: no-repeat;}
#drinkicon{background-image: url(../img/a1.png);
  background-position: center;
  background-repeat: no-repeat;}
#bikeicon{background-image: url(../img/a3.png);
  background-position: center;
  background-repeat: no-repeat;}
#caricon{background-image: url(../img/a4.png);
  background-position: center;
  background-repeat: no-repeat;}
#bike2icon{background-image: url(../img/a7.png);
  background-position: center;
 
  background-repeat: no-repeat;}




/*liにactiveクラスがついた時の形状*/
.tab li.active a{
  background:#fff;
}


/*エリアの表示非表示と形状*/
.area {
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過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;
  }
}



/*========= レイアウトのためのCSS ===============*/